From fa8ac8c9d84066b2f3befb62602c7f31e6669d17 Mon Sep 17 00:00:00 2001
From: Frank Adaemmer <frank@adaemmer.com>
Date: Sat, 20 May 2023 23:22:41 +0200
Subject: [PATCH] clean up html

---
 index.html | 160 +++++++++++++++++++++++++++--------------------------
 1 file changed, 82 insertions(+), 78 deletions(-)
diff --git a/index.html b/index.html
index a7967c1..0c8a766 100644
--- a/index.html
+++ b/index.html
@@ -1,110 +1,114 @@
 <!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">
+<head>
+  <title>Mappersons</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: 90vh;
-      }
-      #slider {
-        position: relative;
-        width: 100%;
-        margin-bottom:1em;
-        }
+  <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="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>
+    #custom-handle {
+      width: 8em;
+      height: 1.6em;
+      top: 50%;
+      margin-top: -.8em;
+      text-align: center;
+      line-height: 1.6em;
+    }
 
-    <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>',
-        maxZoom: 18,
-        id: 'mapbox/streets-v11',
-        tileSize: 512,
-        zoomOffset: -1
-      }).addTo(map);
+  </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>
 
-      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 => {
-        return L.marker([location.lat, location.lng], {icon: L.icon({
-
-        iconUrl: location.icon,
-        iconAnchor: location.anchor
-        })})
-        .bindPopup(location.popup)
-        .addTo(markerLayer);
-          });
+        return L.marker([location.lat, location.lng], {
+          icon: L.icon({
+            iconUrl: location.icon,
+            iconAnchor: location.anchor
+          })
+        })
+          .bindPopup(location.popup)
+          .addTo(markerLayer);
+      });
       map.addLayer(markerLayer)
     }
 
-    </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);
+  </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}`);
+    // 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" );
+    var handle = $("#custom-handle");
     $("#slider").slider({
-        value: week,
-        min: week - 4,
-				max: week + 12,
-				step: 1,
+      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>
+  </script>
+</body>
+
 </html>
