Parkeringsplatserna utanför skolan är bekvämt fyrkantiga placerade i öst-västlig riktning. Gul parkering kräver tillstånd och röd markering är rektorns egen parkering som ingen annan får använda.
Grön parkering är för alla, personal som inte fått plats på parkeringarna som kräver tillstånd eller föräldrar på besök, eller vem om helst som har ärenden i området.
Zoomnivån har ändrats till 17 för att parkeringarna ska synas.
Om du granskar koden ser du att koordinater ges en egen variabel som sedan läggs till den form om ska ritas ut. Sedan beror det på om formen fått benämningen "rectangle" eller "polygon". Även om du gett flera koordinater till en polygon men angett den som rectangle av misstag, så tas bara de första två koordinaterna med vid utritningen (ett vanligt nybörjarfel).
Röd kod är det som skiljer koden från den i Leaflet 1.
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leaflet 4</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" style="width: 600px; height: 400px;"></div>
<script>
var map = L.map('map').setView([58.0637858, 11.8367184], 17);
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);
//Skriv in rektanglar:
// bestäm koordinaterna
var rektor_koordinat= [[58.06386905803055, 11.836379821966387], [58.06382362331538, 11.836526525278202]];
//Skriv ut rektorns parkering (en rektangel)
var rektor1 = L.rectangle(rektor_koordinat, {color: 'red', fillColor: 'red'}).addTo(map);
rektor1.bindTooltip("P - Rektor").openTooltip();
var tillstand1_koordinat= [[58.063980105932075, 11.836023761318515], [58.06393490349181, 11.836534784542375]];
//Skriv ut första parkeringen som kräver tillstånd (en rektangel)
var tillstand1 = L.rectangle(tillstand1_koordinat, {color: 'yellow', fillColor: 'yellow'}).addTo(map);
tillstand1.bindTooltip("P - Tillstånd").openTooltip();
var tillstand2_koordinat= [[58.063876465040664, 11.835506377158504], [58.063819320331284, 11.836143479545017]];
//Skriv ut andra parkeringen som kräver tillstånd (en rektangel)
var tillstand2 = L.rectangle(tillstand2_koordinat, {color: 'yellow', fillColor: 'yellow'}).addTo(map);
tillstand2.bindTooltip("P - Tillstånd").openTooltip();
var fritt_koordinat= [[58.06439076572815, 11.834103038229207], [58.06414275253572, 11.834660681784703], [58.063924119592606, 11.834294489156258], [58.06415449292313, 11.83377615202827]];
//Skriv ut den fria parkeringen (en polygon, INTE rektangel)
var fritt = L.polygon(fritt_koordinat, {color: 'green', fillColor: 'green'}).addTo(map);
fritt.bindTooltip("P - Fritt").openTooltip();
</script>
</body>
</html>