Leaflet 3

Koden som behövs skiljer inte mycket mellan att rita punkter eller att rita cirklar.

För att göra den tydligare ligger cirklarna på samma plats som punktmarkörerna från förra uppgiften, men de har fått nya färger och olika storlekar för att visa skillnaden i radie.

Hela koden står under kartan. Det som är nytt från förra momentet har 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 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.circle([58.0637858,11.8367184], 50).addTo(map)

marker.setStyle({fillColor: 'orange'});

marker.setStyle({color: 'orange'});

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


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

marker1.setStyle({fillColor: 'grey'});

marker1.setStyle({color: 'grey'});

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


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

marker2.setStyle({fillColor: 'pink'});

marker2.setStyle({color: 'pink'});

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


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

marker3.setStyle({fillColor: 'yellow'});

marker3.setStyle({color: 'yellow'});

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


var marker4 = L.circle([58.063724,11.834559], 10).addTo(map);

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

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

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


</script>

</body>

</html>