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

160
index.html
View file

@ -1,110 +1,114 @@
<!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 {
position: relative;
width: 100%;
margin-bottom:1em;
}
#slider {
position: relative;
width: 100%;
margin-bottom: 1em;
}
#custom-handle { #custom-handle {
width: 8em; width: 8em;
height: 1.6em; height: 1.6em;
top: 50%; top: 50%;
margin-top: -.8em; margin-top: -.8em;
text-align: center; text-align: center;
line-height: 1.6em; 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>
</head>
<body>
<div id="slider"> <div id="custom-handle" class="ui-slider-handle"></div></div>
<div id="map"></div> </style>
<script> <!-- Make sure you put this AFTER Leaflet's CSS -->
const map = L.map('map').setView([51.14027, 10.45863], 7); <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + </head>
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
var markerLayer = L.layerGroup(); <body>
<div id="slider">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>
function loadWeek(locations){ <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 &copy <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
var markerLayer = L.layerGroup();
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) })
.addTo(markerLayer); .bindPopup(location.popup)
}); .addTo(markerLayer);
});
map.addLayer(markerLayer) map.addLayer(markerLayer)
} }
</script> </script>
<script src="external/jquery/jquery.js"></script> <script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script> <script src="jquery-ui.js"></script>
<script> <script>
Date.prototype.getWeek = function() { Date.prototype.getWeek = function () {
var onejan = new Date(this.getFullYear(), 0, 1); var onejan = new Date(this.getFullYear(), 0, 1);
return Math.ceil((((this - onejan) / 86400000) + onejan.getDay() + 1) / 7); return Math.ceil((((this - onejan) / 86400000) + onejan.getDay() + 1) / 7);
} }
// Set initial date to current calendar week and year // Set initial date to current calendar week and year
// Initialize slider with current calendar week and year // Initialize slider with current calendar week and year
let now = new Date(); let now = new Date();
let year = now.getFullYear(); // get the full four-digit year let year = now.getFullYear(); // get the full four-digit year
let week = now.getWeek(); // get the week as a number, where 0 represents the first week of the year let week = now.getWeek(); // get the week as a number, where 0 represents the first week of the year
console.log(`The current week of ${year} is ${week}`); console.log(`The current week of ${year} is ${week}`);
var handle = $( "#custom-handle" ); var handle = $("#custom-handle");
$("#slider").slider({ $("#slider").slider({
value: week, value: week,
min: week - 4, min: week - 4,
max: week + 12, max: week + 12,
step: 1, step: 1,
create: function() { create: function () {
handle.text( `KW ${week}/${year}`); handle.text(`KW ${week}/${year}`);
$.ajaxSetup({ cache: false }); $.ajaxSetup({ cache: false });
$.getJSON(`cw_${week}_${year}.json`, function( data ) { $.getJSON(`cw_${week}_${year}.json`, function (data) {
loadWeek(data); loadWeek(data);
}); });
}, },
slide: function( event, ui ) { slide: function (event, ui) {
// ToDo: handle year change // ToDo: handle year change
var curweek = ui.value; var curweek = ui.value;
var curyear = year; var curyear = year;
if (map.hasLayer(markerLayer)) { if (map.hasLayer(markerLayer)) {
markerLayer.clearLayers(); markerLayer.clearLayers();
} }
handle.text( `KW ${curweek}/${curyear}`); handle.text(`KW ${curweek}/${curyear}`);
$.ajaxSetup({ cache: false }); $.ajaxSetup({ cache: false });
$.getJSON(`cw_${curweek}_${curyear}.json`, function( data ) { $.getJSON(`cw_${curweek}_${curyear}.json`, function (data) {
loadWeek(data); loadWeek(data);
}); });
} }
}); });
</script> </script>
</body> </body>
</html> </html>