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: '© <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>