Det är ungefär som exemplet i USA, men med mer svenska förhållanden.
Översta lagret visar olika skolor.
Andra lagret visar hur vägen mellan Kristinedalskolan och Nösnäsgymnasiet går, enligt förra temat med linjer. Se bara till så att alla addto(map) är borta så kontrollerna bara ritas ut om rätt ruta är ikryssad.
Tredje lagret visar de två ICA butikerna.
Slutligen finns två extra kartlager med. Ett där kartan ser ut att ha målats med akvarell, som duger om man vill ha översiktskartor, skattkartor och liknande, liksom en karta som är mer inriktad mot topografin.
Det är alltid lättare att förstå koden om samma kod visas flera gånger på olika sätt. Därför är fler kartlager och extra lager för kontroller inritade på den svenska kartan jämfört med den över USA i exemplet från Leaflet, . För tydlighetens skull.
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leaflet 6</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
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>
<div id='map'></div>
<script>
//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 skolor = L.layerGroup();
var mKristinedal = L.marker([58.063525851951226, 11.836726094818037]).bindPopup('Kristinedalskolan 1-6').addTo(skolor);
var mStenung = L.marker([58.06934019749785, 11.824983538700968]).bindPopup('Stenungskolan 7-9').addTo(skolor);
var mKopper = L.marker([58.067848583309456, 11.84715603364609]).bindPopup('Kopperskolan 11-6').addTo(skolor);
var mNosnas = L.marker([58.05608797675831, 11.828472583935513]).bindPopup('Nösnäsgymnasiet').addTo(skolor);
//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: [58.066631753179315, 11.834816578124764],
zoom: 13,
//De lager som är med vid uppstart, kartlager och kontroller
//Hade det stått layers: [streets, skolor] hade Streets kartan visats i botten vid start
layers: [osm, skolor]
});
//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 = {
'Skolor': skolor
};
//Rita ut menyn längst upp till höger på kartan
var layerControl = L.control.layers(baseLayers, overlays).addTo(map);
//OBS! HÄR UNDER SKRIVS KARTOR OCH OVERLAY IN ANNORLUNDA I KODEN EFTERSOM MENYN REDAN ÄR UTSKRIVEN PÅ KARTAN!!!
//Gängvägen till Nösnäsgymnasiet ska också in i kontrollen längst upp till höger, i det andra lagret
//Ta samma kpd soo förra gången men radera alla addto(map) så de inte ritas ut direkt.
//Nu är redan kartmenyn utritad så nu görs det hela annorlunda
//Först ger vi dem ett namn och koordinater
//Gångvägen till gymnasiet
var gymnasiet_koordinat= [
[58.063660583123266, 11.836286234924978],
[58.06378303149182, 11.83593430631026],
[58.063707493569886, 11.834551534735061],
[58.0625600316872, 11.834951631880843],
[58.062379167533116, 11.834122784589399],
[58.06209801056336, 11.834170134085513],
[58.06144047414001, 11.832523808869736],
[58.06079552438438, 11.833059188661965],
[58.06024327618596, 11.832388839953092],
[58.05954838579759, 11.833029782677682],
[58.05829521084645, 11.829339055318455],
[58.058075716090705, 11.828094676346707],
[58.05660054064898, 11.827459196350913],
[58.05607329885935, 11.828221813558484]
]
var polylinenosnas = L.polyline(gymnasiet_koordinat, {color: 'blue'});
//Startpunkt och slutpunkt
var marker1 = L.marker([58.063660583123266, 11.836286234924978 ]);
marker1.bindTooltip("Samling").openTooltip();
var marker2 = L.marker([58.05607329885935, 11.828221813558484 ]);
marker2.bindTooltip("Samling").openTooltip();
//Varning
var markervarning = L.circle([58.05793713384133, 11.8280930721252], 25);
markervarning.setStyle({fillColor: 'red'});
markervarning.setStyle({color: 'red'});
markervarning.bindTooltip("AKTA bilar").openTooltip();
//Sedan ges de till en lagergrupp
var vagentillnosnas = L.layerGroup([polylinenosnas, marker1, marker2,markervarning ]);
//Slutligen skrivs den in i menyn uppe till höger som "Overlay"
layerControl.addOverlay(vagentillnosnas, 'Gångväg');
//Till tredje lagret
var ICA1 = L.marker([58.06513565796707, 11.835025590858379]).bindPopup('Detta är ICA Supermarket');
var ICA2 = L.marker([58.075217096450174, 11.826037147295951]).bindPopup('Detta är ICA Kvantum');
//Sedan ges de till en lagergrupp
var icabutiker = L.layerGroup([ICA1, ICA2 ]);
//Slutligen skrivs den in i menyn uppe till höger som "Overlay"
layerControl.addOverlay(icabutiker, 'ICA butiker');
//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');
//Ännu ett kartlager läggs in, Stamens lager är populärt eftersom det går att göra skattkartor med det
var Stamen_Watercolor = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: 'abcd',
minZoom: 1,
maxZoom: 16,
ext: 'jpg'
});
//Vi lägger in den i menyn
layerControl.addBaseLayer(Stamen_Watercolor, 'Akvarell');
//Sedan en topografisk karta med snyggare färger
var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
maxZoom: 17,
attribution: 'Map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
});
//Vi lägger in den i menyn
layerControl.addBaseLayer(OpenTopoMap, 'Topografisk');
</script>
</body>
</html>