Leaflet 6 - Svenskt exempel

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.

En svensk version av samma kod, med fler lager och fler baskartor

<!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 &copy; <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: '&copy; <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> &mdash; Map data &copy; <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: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <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>