Leaflet 6

Dokumentationen är minst sagt bristfällig på Leaflets hemsida.

https://leafletjs.com/examples/layers-control/

Här är i alla fall originaloden, som jag försökt tyda så gott jag kunnat och med svenska kommentarer inlagda i koden så att det ska bli tydligare hur det går till.

Observera att det är två olika sätt att lägga in menyerna på beroende på om lagren ritas ut innan eller efter själva menystacken ritats ut längst uppe till höger på kartan.

För att göra det extra tydligt har jag skapat en andra flik där samma kod försvenskats till våra egna förhållanden.

Originalkoden ur exemplet, med kommentarer på svenska.

<!DOCTYPE html>

<head>

<title>Leaflet 6</title>

integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="crossorigin=""/>

integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin="">

</script>

<style>

html, body {

height: 100%;

margin: 0;

}

.leaflet-container {

height: 400px;

width: 600px;

max-width: 100%;

max-height: 100%;

}

</style>

</head>

<body>

//Skriv ut det som ska synas direkt vid uppstart

//Detta blir automatiskt ikryssat

//Observera den om vända ordningen, först skapas lagret, seda fylls det med kontroller

var cities = L.layerGroup();

var mLittleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities);

var mDenver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities);

var mAurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities);

var mGolden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);

//Initiera två bakgrundskartor

//Streets kartan, i botten

var mbAttr = 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';

var mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

var streets = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});

//Open Street Maps kartan, i botten ovanpå streets kartan

var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

maxZoom: 19,

attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'

});

//Bakgrundskartan som visas upp vid uppstart

var map = L.map('map', {

center: [39.73, -104.99],

zoom: 10,

//De lager som är med vid uppstart, kartlager och kontroller

//Hade det stått layers: [streets, cities] hade Streets kartan visats i botten vid start istället för osm.

layers: [osm, cities]

});

//Lägg in två bakgrundskartor, osm och streets, i menyn längst upp till höger.

var baseLayers = {

'OpenStreetMap': osm,

'Streets': streets

};

//Lägg in de undre overlayen i menyn längst upp till höger

var overlays = {

'Cities': cities

};

//Rita ut menyn längst upp till höger på kartan

var layerControl = L.control.layers(baseLayers, overlays).addTo(map);

//Parkerna ska också in i kontrollen längst upp till höger

//Nu är redan kontrollen utritad så nu görs det hela annorlunda

//Först ger vi dem ett namn och koordinater

var crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.');

var rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');

//Sedan ges de till en lagergrupp

var parks = L.layerGroup([crownHill, rubyHill]);

//Slutligen skrivs den in i menyn uppe till höger som "Overlay"

layerControl.addOverlay(parks, 'Parks');

//Ett till kartager ska läggas in, nu är det fråga om satellitbild

var satellite = L.tileLayer(mbUrl, {id: 'mapbox/satellite-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr});

//Slutligen skrivs den in i menyn uppe till höger som "Baselayer"

layerControl.addBaseLayer(satellite, 'Satellite');

</script>

</body>

</html>