Re-enable timeslider.

README.md

@@ -1,4 +1,4 @@
-# openstreetmap-website
+ # openstreetmap-website
 
 [![Lint](https://github.com/openstreetmap/openstreetmap-website/workflows/Lint/badge.svg?branch=master&event=push)](https://github.com/openstreetmap/openstreetmap-website/actions?query=workflow%3ALint%20branch%3Amaster%20event%3Apush)
 [![Tests](https://github.com/openstreetmap/openstreetmap-website/workflows/Tests/badge.svg?branch=master&event=push)](https://github.com/openstreetmap/openstreetmap-website/actions?query=workflow%3ATests%20branch%3Amaster%20event%3Apush)

app/assets/javascripts/index.js

@@ -1,7 +1,7 @@
 //= require_self
 //= require leaflet.sidebar
 //= require leaflet.sidebar-pane
-//= require leaflet.locatecontrol/src/L.Control.Locate
+//= require leaflet.locatecontrol/dist/L.Control.Locate.umd
 //= require leaflet.locate
 //= require leaflet.layers
 //= require leaflet.key
@@ -258,20 +258,10 @@ $(document).ready(function () {
     });
 
     function sendRemoteEditCommand(url, callback) {
-      var iframe = $("<iframe>");
-      var timeoutId = setTimeout(function () {
-        alert(I18n.t("site.index.remote_failed"));
-        iframe.remove();
-      }, 5000);
-
-      iframe
-        .hide()
-        .appendTo("body")
-        .attr("src", url)
-        .on("load", function () {
-          clearTimeout(timeoutId);
-          iframe.remove();
-          if (callback) callback();
+      fetch(url, { mode: "no-cors", signal: AbortSignal.timeout(5000) })
+        .then(callback)
+        .catch(function () {
+          alert(I18n.t("site.index.remote_failed"));
         });
     }
 
@@ -390,7 +380,9 @@ $(document).ready(function () {
         }
       });
 
-      setTimeout(addOpenHistoricalMapInspector(), 250);
+      setTimeout(() => {
+        addOpenHistoricalMapInspector()
+      }, 250);
 
       $(".colour-preview-box").each(function () {
         $(this).css("background-color", $(this).data("colour"));

app/assets/javascripts/index/timeslider.js

@@ -30,9 +30,8 @@ function addOpenHistoricalMapTimeSlider (map, params, onreadycallback) {
   if (params && params.daterange && typeof params.daterange == 'string' && params.daterange.match(/^\-?\d{1,4}\-\d\d\-\d\d,\-?\d{1,4}\-\d\d\-\d\d$/)) {
     sliderOptions.range = params.daterange.split(',');
   }
-
   // change basemap = MBGL gone and so is the real timeslider, so reinstate a new one
-  // add the slider IF the the OSM vector map is the layer showing
+  // add the slider IF the OSM vector map is the layer showing
   if (getHistoryLayerIfShowing()) {
     addTimeSliderToMap(sliderOptions);
   }
@@ -42,6 +41,7 @@ function addOpenHistoricalMapTimeSlider (map, params, onreadycallback) {
     // by now, the timeslider is already gone from the visible map, along with the MBGL map
     // but the Leaflet wrapper will leave behind an empty DIV, and those pile up
     const oldctrl = this._container.querySelector('div.leaflet-control.leaflet-ohm-timeslider');
+
     if (oldctrl) oldctrl.parentElement.removeChild(oldctrl);
 
     if (this.timeslider) this.timeslider.autoplayPause();
@@ -72,11 +72,12 @@ function addOpenHistoricalMapTimeSlider (map, params, onreadycallback) {
   function addTimeSliderToMap (slideroptions) {
     const ohmlayer = getHistoryLayerIfShowing();
     slideroptions.vectorLayer = ohmlayer;
+
     map.timeslider = new L.Control.OHMTimeSlider(slideroptions).addTo(map);
 
     // if a callback was given for when the slider is ready, poll until it becomes ready
     if (onreadycallback) {
-      var waitforslider = setInterval(function () {
+      var waitforslider = setInterval(() => {
         var ready = ! getHistoryLayerIfShowing() || map.timeslider;
         if (ready) {
           clearInterval(waitforslider);

app/assets/javascripts/leaflet.map.js

@@ -67,6 +67,51 @@ L.OSM.Map = L.Map.extend({
 
     this.baseLayers = [];
 
+    this.ohmMaplibreOptions = {
+      attribution: `<a href="https://wiki.openstreetmap.org/wiki/OHM">OHM</a> &hearts; ${donate}`,
+      localIdeographFontFamily: "'Noto Sans', 'Noto Sans CJK SC', sans-serif",
+      minZoom: 1,  /* leave at 1 even if L.OSM.Map has something deeper */
+      maxZoom: 20,  /* match to "L.OSM.Map" options in index.js */
+    }
+
+    /* see also timeslider.js and viewreset/baselayerchange handlers */
+
+    this.baseLayers.push(new L.MaplibreGL(
+      Object.assign(this.ohmMaplibreOptions, {
+        code: "O",
+        keyid: "historical",
+        name: I18n.t("javascripts.map.base.historical"),
+        style: ohmVectorStyles.Original,
+      })
+    ));
+
+    this.baseLayers.push(new L.MaplibreGL(
+      Object.assign(this.ohmMaplibreOptions, {
+        code: "R",
+        keyid: "railway",
+        name: I18n.t("javascripts.map.base.railway"),
+        style: ohmVectorStyles.Railway,
+      })
+    ));
+
+    this.baseLayers.push(new L.MaplibreGL(
+      Object.assign(this.ohmMaplibreOptions, {
+        code: "W",
+        keyid: "woodblock",
+        name: I18n.t("javascripts.map.base.woodblock"),
+        style: ohmVectorStyles.Woodblock,
+      })
+    ));
+
+    this.baseLayers.push(new L.MaplibreGL(
+      Object.assign(this.ohmMaplibreOptions, {
+        code: "J",
+        keyid: "japanese",
+        name: I18n.t("javascripts.map.base.japanesescroll"),
+        style: ohmVectorStyles.JapaneseScroll,
+      })
+    ));
+
     this.baseLayers.push(new L.OSM.Mapnik({
       attribution: copyright + " &hearts; " + donate + ". " + terms,
       code: "M",

app/assets/javascripts/welcome.js

@@ -31,7 +31,9 @@ $(document).ready(function () {
       if (navigator.geolocation) {
         // handle firefox's weird implementation
         // https://bugzilla.mozilla.org/show_bug.cgi?id=675533
-        window.setTimeout(manualEdit, 4000);
+        window.setTimeout(() => {
+          manualEdit
+        }, 4000);
 
         navigator.geolocation.getCurrentPosition(geoSuccess, manualEdit);
       } else {