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