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

68
index.html
View file

@ -1,23 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>World Map with OpenStreetMap</title>
<head>
<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;
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>
</head>
<body>
<div id="slider"> <div id="custom-handle" class="ui-slider-handle"></div></div>
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 &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,
@ -49,13 +51,14 @@
var markerLayer = L.layerGroup();
function loadWeek(locations){
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);
});
@ -63,48 +66,49 @@
}
</script>
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
Date.prototype.getWeek = function() {
<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
// 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}`);
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" );
var handle = $("#custom-handle");
$("#slider").slider({
value: week,
min: week - 4,
max: week + 12,
step: 1,
create: function() {
handle.text( `KW ${week}/${year}`);
create: function () {
handle.text(`KW ${week}/${year}`);
$.ajaxSetup({ cache: false });
$.getJSON(`cw_${week}_${year}.json`, function( data ) {
$.getJSON(`cw_${week}_${year}.json`, function (data) {
loadWeek(data);
});
},
slide: function( event, ui ) {
slide: function (event, ui) {
// ToDo: handle year change
var curweek = ui.value;
var curyear = year;
if (map.hasLayer(markerLayer)) {
markerLayer.clearLayers();
}
handle.text( `KW ${curweek}/${curyear}`);
handle.text(`KW ${curweek}/${curyear}`);
$.ajaxSetup({ cache: false });
$.getJSON(`cw_${curweek}_${curyear}.json`, function( data ) {
$.getJSON(`cw_${curweek}_${curyear}.json`, function (data) {
loadWeek(data);
});
}
});
</script>
</body>
</body>
</html>