Leaflet 2

Samma sorts karta, men nu ska vi lägga in en tipspromenad. Ny kod, som inte var med på förra exemplet, har röd text.


Grundkoden för att lägga in en markör mitt på kartan är:

var marker = L.marker([58.0637858,11.8367184 ]).addTo(map)

Koden ska placeras efter att kartan ritats ut. Annars hamnar markören under kartan, och är det så här kort avstånd mellan markörerna måste zoom ändras från 15 till 16 för att de inte ska gröta ihop sig.


Ska du ha text till den används följande kod, alldeles under markören:

marker.bindTooltip("Kristinedalskolan, start").openTooltip();

Har du mer än en markör måste de få unika namn. marker1, marker2, marker 3 och så vidare. Etiketterna syns bara om musen vilar på dem när du visar kartan för andra.


Det kan tyckas enkelt att ändra markörens färg eller form, men det är det inte. Exempel kommer dock längre fram.

<!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], 16);

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);

var marker = L.marker([58.0637858,11.8367184 ]).addTo(map)

marker.bindTooltip("Kristinedalskolan, start").openTooltip();


var marker1 = L.marker([58.063935,11.838604 ]).addTo(map)

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


var marker2 = L.marker([58.062971,11.838044 ]).addTo(map)

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


var marker3 = L.marker([58.063085,11.834621 ]).addTo(map)

marker3.bindTooltip("Fjärde").openTooltip();


var marker4 = L.marker([58.063724,11.834559 ]).addTo(map)

marker4.bindTooltip("Femte, slut").openTooltip();





</script>

</body>

</html>