adaemmer/mappersons
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

clean up html

Browse source
This commit is contained in:
Frank Adaemmer 2023-05-20 23:22:41 +02:00
parent 36a3400e5d
commit fa8ac8c9d8
1 changed files with 82 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
index.html
View file

@ -1,23 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>World Map with OpenStreetMap</title>
<title>Mappersons</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<link href="jquery-ui.css" rel="stylesheet">
<style>
#map {
height: 90vh;
}
#slider {
position: relative;
width: 100%;
margin-bottom: 1em;
}
#custom-handle {
width: 8em;
height: 1.6em;
@ -26,21 +25,24 @@
text-align: center;
line-height: 1.6em;
}
</style>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
</head>
<body>
<div id="slider"> <div id="custom-handle" class="ui-slider-handle"></div></div>
<div id="slider">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>
<div id="map"></div>
<script>
const map = L.map('map').setView([51.14027, 10.45863], 7);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
@ -51,11 +53,12 @@
function loadWeek(locations) {
locations.map(location => {
return L.marker([location.lat, location.lng], {icon: L.icon({
return L.marker([location.lat, location.lng], {
icon: L.icon({
iconUrl: location.icon,
iconAnchor: location.anchor
})})
})
})
.bindPopup(location.popup)
.addTo(markerLayer);
});
@ -107,4 +110,5 @@ console.log(`The current week of ${year} is ${week}`);
});
</script>
</body>
</html>