Leaflet 1

Mitt på kartan ligger Kristinedalskolan i Stenungsund, där jag arbetar. Koordinaterna är latitud 58.0637858 och longitud 11.8367184 och förstoringen ligger på 15 av maximalt 19.

Under kartan hittar du källkoden till visningen av kartan. Blå text är de olika javascripten Grön text är style-scripten.


<html lang="sv"> säger att sidan är på svenska.

<title>Leaflet 1</title> är titeln som du kan ändra till nästan vad du vill. texten syns oftast längst upp i webläsaren när du besöker sidan.

Style-instruktionerna är självförklarande.

<div id="map" style="width: 600px; height: 400px;"></div> förklarar att den del av kartan som ska visas är 600 pixels bred och 400 pixels hög

var map = L.map('map').setView([58.0637858, 11.8367184], 15); förklarar var på jorden kartan ska centreras, breddgrader först.

var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', förklarar vilken karta som Leaflet ska använda

attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' visar vem som innehar kartan. För kommersiella kartor visar det copyrighten.

.addTo(map); är kommandot för att rita ut den utvalda delen av kartan på sidan.

<!DOCTYPE html>

<html lang="sv">

<head>

<meta charset="utf-8">

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

<title>Leaflet 1</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], 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);

</script>

</body>

</html>