Leaflet 5

Höjden på kartan har ökats till 800px, från 400px för att hela vägen ska synas mellan Kristinedalskolan och Nösnäs gymnasiet. Kartan centrerar också på en punkt mellan skolorna.


Ändringar i koden från Leaflet 1 markeras med röd text.

<!DOCTYPE html>

<html lang="sv">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Leaflet 5</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: 800px;

width: 600px;

max-width: 100%;

max-height: 100%;

}

</style>


</head>

<body>

<div id="map" style="width: 600px; height: 800px;"></div>

<script>

var map = L.map('map').setView([58.060765921261655, 11.832692801525573], 15);

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

maxZoom: 19,

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

}).addTo(map);


//Testlinje runt parkeringen:

var linje_koordinat= [[58.06439076572815, 11.834103038229207], [58.06414275253572, 11.834660681784703], [58.063924119592606, 11.834294489156258], [58.06415449292313, 11.83377615202827]];

var polyline = L.polyline(linje_koordinat, {color: 'red'}).addTo(map);


//Testlinje runt parkeringen

var linje_koordinat= [[58.06439076572815, 11.834103038229207], [58.06414275253572, 11.834660681784703], [58.063924119592606, 11.834294489156258], [58.06415449292313, 11.83377615202827]];

var polyline = L.polyline(linje_koordinat, {color: 'red'}).addTo(map);


//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 polyline = L.polyline(gymnasiet_koordinat, {color: 'blue'}).addTo(map);


//Startpunkt och slutpunkt

var marker1 = L.marker([58.063660583123266, 11.836286234924978 ]).addTo(map)

marker1.bindTooltip("Samling").openTooltip();


var marker2 = L.marker([58.05607329885935, 11.828221813558484 ]).addTo(map)

marker2.bindTooltip("Samling").openTooltip();


//Varning

var markervarning = L.circle([58.05793713384133, 11.8280930721252], 25).addTo(map);

markervarning.setStyle({fillColor: 'red'});

markervarning.setStyle({color: 'red'});

markervarning.bindTooltip("AKTA bilar").openTooltip();


</script>

</body>

</html>