129 lines
3.6 KiB
HTML
129 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>World Map with OpenStreetMap</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
|
|
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
|
|
crossorigin=""/>
|
|
<link href="jquery-ui.css" rel="stylesheet">
|
|
|
|
<style>
|
|
#map {
|
|
height: 100vh;
|
|
}
|
|
#slider {
|
|
position: relative;
|
|
width: 100%;
|
|
margin-bottom:1em;
|
|
}
|
|
|
|
|
|
#custom-handle {
|
|
width: 8em;
|
|
height: 1.6em;
|
|
top: 50%;
|
|
margin-top: -.8em;
|
|
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>
|
|
</head>
|
|
<body>
|
|
<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 © <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>',
|
|
maxZoom: 18,
|
|
id: 'mapbox/streets-v11',
|
|
tileSize: 512,
|
|
zoomOffset: -1
|
|
}).addTo(map);
|
|
|
|
const locations = [
|
|
{
|
|
"city": "Hamburg",
|
|
"lat": "53.64286",
|
|
"lng": "9.9753",
|
|
"icon": "test5.png",
|
|
"anchor": [101,101]
|
|
},
|
|
// {
|
|
// "city": "Kiel",
|
|
// "lat": "54.3297",
|
|
// "lng": "10.1435"
|
|
// },
|
|
// {
|
|
// "city": "München",
|
|
// "lat": "48.1341",
|
|
// "lng": "11.5674",
|
|
// "icon": "test8.png",
|
|
// "anchor": [144,144]
|
|
// },
|
|
{
|
|
"city": "La Spezia",
|
|
"lat": "44.1064",
|
|
"lng": "9.8439",
|
|
"icon": "test8.png",
|
|
"anchor": [144,144]
|
|
},
|
|
{
|
|
"city": "Teisnach",
|
|
"lat": "49.0301",
|
|
"lng": "12.998",
|
|
"icon": "test13.png",
|
|
"anchor": [144,144]
|
|
}
|
|
];
|
|
|
|
|
|
const markers = locations.map(location => {
|
|
return L.marker([location.lat, location.lng], {icon: L.icon({
|
|
|
|
iconUrl: location.icon,
|
|
iconAnchor: location.anchor
|
|
})}).addTo(map);
|
|
});
|
|
</script>
|
|
<script src="external/jquery/jquery.js"></script>
|
|
<script src="jquery-ui.js"></script>
|
|
<script>
|
|
Date.prototype.getWeek = function() {
|
|
var onejan = new Date(this.getFullYear(), 0, 1);
|
|
return Math.ceil((((this - onejan) / 86400000) + onejan.getDay() + 1) / 7);
|
|
}
|
|
// Set initial date to current calendar week and year
|
|
// Initialize slider with current calendar week and year
|
|
let now = new Date();
|
|
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
|
|
console.log(`The current week of ${year} is ${week}`);
|
|
|
|
var handle = $( "#custom-handle" );
|
|
$("#slider").slider({
|
|
value: week,
|
|
min: week - 4,
|
|
max: week + 12,
|
|
step: 1,
|
|
|
|
create: function() {
|
|
handle.text( `KW ${week}/${year}`);
|
|
},
|
|
slide: function( event, ui ) {
|
|
var curweek = ui.value;
|
|
var curyear = year;
|
|
|
|
handle.text( `KW ${curweek}/${curyear}`);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|