layout, title
| layout |
title |
| tutorial_frame |
Layers Control Tutorial |
<script>
const cities = L.layerGroup();
const mLittleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities);
const mDenver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities);
const mAurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities);
const mGolden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
const osm = L.tileLayer('
https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '©
OpenStreetMap'
});
const osmHOT = L.tileLayer('
https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '©
OpenStreetMap contributors, Tiles style by
Humanitarian OpenStreetMap Team hosted by
OpenStreetMap France'
});
const map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [osm, cities]
});
const baseLayers = {
'OpenStreetMap': osm,
'OpenStreetMap.HOT': osmHOT
};
const overlays = {
'Cities': cities
};
const layerControl = L.control.layers(baseLayers, overlays).addTo(map);
const crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.');
const rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');
const parks = L.layerGroup([crownHill, rubyHill]);
const openTopoMap = L.tileLayer('
https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: 'Map data: ©
OpenStreetMap contributors,
SRTM | Map style: ©
OpenTopoMap (
CC-BY-SA)'
});
layerControl.addBaseLayer(openTopoMap, 'OpenTopoMap');
layerControl.addOverlay(parks, 'Parks');
</script>
