UNPKG

leaflet

Version:

JavaScript library for mobile-friendly interactive maps

39 lines (30 loc) 1.3 kB
--- layout: tutorial_frame title: Layers Control Tutorial --- <script> var cities = new L.LayerGroup(); L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities), L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities), L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities), L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities); var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>', mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw'; var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}), streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr}); var map = L.map('map', { center: [39.73, -104.99], zoom: 10, layers: [grayscale, cities] }); var baseLayers = { "Grayscale": grayscale, "Streets": streets }; var overlays = { "Cities": cities }; L.control.layers(baseLayers, overlays).addTo(map); </script>