128 lines
3.7 KiB
HTML
128 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Mappersons</title>
|
|
<link rel="stylesheet" href="leaflet.css" />
|
|
<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;
|
|
top: 50%;
|
|
margin-top: -.8em;
|
|
text-align: center;
|
|
line-height: 1.6em;
|
|
}
|
|
|
|
</style>
|
|
<!-- Make sure you put this AFTER Leaflet's CSS -->
|
|
<script src="leaflet.js"></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);
|
|
|
|
var markerLayer = L.layerGroup();
|
|
|
|
function loadWeek(locations) {
|
|
locations.map(location => {
|
|
L.marker([location.lat, location.lng], {
|
|
icon: L.icon({
|
|
iconUrl: location.icon,
|
|
iconAnchor: location.anchor
|
|
})
|
|
})
|
|
.bindPopup(location.popup)
|
|
.addTo(markerLayer);
|
|
location.bases.map(base => {
|
|
return L.polyline([[location.lat, location.lng],[base.lat,base.lng]],{color: 'red', weight: 1}).addTo(markerLayer);
|
|
});
|
|
return;
|
|
});
|
|
map.addLayer(markerLayer);
|
|
}
|
|
|
|
</script>
|
|
<script src="external/jquery/jquery.js"></script>
|
|
<script src="jquery-ui.js"></script>
|
|
<script>
|
|
Date.prototype.getWeek = function () {
|
|
var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
|
|
// Set to nearest Thursday: current date + 4 - current day number
|
|
// Make Sunday's day number 7
|
|
d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
|
|
// Get first day of year
|
|
var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
|
|
// Calculate full weeks to nearest Thursday
|
|
var weekNo = Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
|
|
return weekNo
|
|
}
|
|
// 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}`);
|
|
$.ajaxSetup({ cache: false });
|
|
$.getJSON(`cw_${week}_${year}.json`, function (data) {
|
|
loadWeek(data);
|
|
});
|
|
},
|
|
slide: function (event, ui) {
|
|
var cur_date = new Date();
|
|
var week = cur_date.getWeek();
|
|
var delta = parseInt(ui.value) - week;
|
|
cur_date.setDate(cur_date.getDate() + 7 * delta);
|
|
var curweek = cur_date.getWeek();
|
|
var curyear = cur_date.getFullYear();
|
|
if (map.hasLayer(markerLayer)) {
|
|
markerLayer.clearLayers();
|
|
}
|
|
handle.text(`KW ${curweek}/${curyear}`);
|
|
$.ajaxSetup({ cache: false });
|
|
$.getJSON(`cw_${curweek}_${curyear}.json`, function (data) {
|
|
loadWeek(data);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|