Added time slider

Author: 1ec5

README.md

@@ -29,7 +29,7 @@ OpenHistoricalMap Americana is a fork of OpenStreetMap Americana, a community pr
 
 ## How to use
 
-You can install the OpenHistoricalMap Americana package and [deploy it anywhere](CONTRIBUTING.md#Production%20builds) as a static webpage. For your convenience, we’ve deployed it [on GitHub Pages](https://americanamap.org/). Click the Legend button to learn the meaning of each symbol, line, and color based on the features currently visible on the map. Click the 🌐 button to simulate a physical globe. Click the ⛰️ button to simulate a relief map.
+You can install the OpenHistoricalMap Americana package and [deploy it anywhere](CONTRIBUTING.md#Production%20builds) as a static webpage. For your convenience, we’ve deployed it [on GitHub Pages](https://americanamap.org/). Click the Legend button to learn the meaning of each symbol, line, and color based on the features currently visible on the map. Click the 🌐 button to simulate a physical globe. Click the ⛰️ button to simulate a relief map. Adjust the time slider to travel back in time.
 
 The style tries to label places in [your browser’s preferred language](https://www.w3.org/International/questions/qa-lang-priorities). To change this preference, consult your browser’s documentation: [Chrome](https://support.google.com/chrome/answer/173424), [Firefox](https://support.mozilla.org/en-US/kb/use-firefox-another-language), [Safari for macOS](https://support.apple.com/guide/mac-help/change-the-system-language-mh26684/mac), [Safari for iOS](https://support.apple.com/en-us/HT204031). You can also override this preference by adding `&language=` to the URL, followed by a comma-separated list of [IETF language tags](https://www.w3.org/International/articles/language-tags/). For example, here’s a map labeled [in Portuguese, falling back to Spanish](https://americanamap.org/#language=pt,es). If we don’t have the name of a place in any of your preferred languages, the style shows the name in the local language as a last resort.
 

package-lock.json

@@ -40,12 +40,14 @@
   "dependencies": {
     "@americana/diplomat": "^0.3.0",
     "@americana/maplibre-shield-generator": "*",
+    "@openhistoricalmap/maplibre-gl-dates": "^1.3.0",
     "color-rgba": "^2.4.0",
     "events": "^3.3.0",
     "fonteditor-core": "^2.1.11",
     "github-fork-ribbon-css": "^0.2.3",
     "openmapsamples": "github:adamfranco/OpenMapSamples",
     "openmapsamples-maplibre": "github:adamfranco/OpenMapSamples-MapLibre",
+    "timescope": "^0.0.0-alpha.11",
     "tokenfield": "^1.5.2"
   },
   "devDependencies": {

package.json

@@ -3,6 +3,7 @@
 import config from "./config.js";
 
 import { LanguageControl } from "./js/language_control.js";
+import { TimeControl } from "./js/time_control.js";
 
 import * as maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
@@ -71,6 +72,7 @@ function shieldDefLoad(shields) {
   map.addControl(new maplibregl.NavigationControl(), "top-left");
   map.addControl(new maplibregl.GlobeControl(), "top-left");
   map.addControl(new HillshadeControl(), "top-left");
+  map.addControl(new TimeControl(), "bottom-right");
 
   window.addEventListener("languagechange", (event) => {
     map.localize();
@@ -112,6 +114,12 @@ function hashChanged(oldURL, newURL) {
   if (oldParams.has("terrain") !== newParams.has("terrain")) {
     map.shadesHills = newParams.has("terrain");
   }
+
+  if ((oldParams.get("date") || null) !== (newParams.get("date") || null)) {
+    map.date = new Date(newParams.get("date"));
+  } else if (!map.date) {
+    map.date = new Date();
+  }
 }
 
 let attributionConfig = {

src/americana.js

@@ -1,4 +1,5 @@
 import { getLocales, localizeStyle } from "@americana/diplomat";
+import { filterByDate } from "@openhistoricalmap/maplibre-gl-dates";
 import maplibregl from "maplibre-gl";
 import { hillshading } from "../layer/hillshade.js";
 
@@ -30,4 +31,17 @@ export class MapView extends maplibregl.Map {
       this.fire("americana.terrain");
     });
   }
+
+  get date(): Date | null {
+    return this.getGlobalState().date;
+  }
+
+  set date(newValue: Date) {
+    console.log(`Setting date to ${newValue}`);
+    this.setGlobalStateProperty("date", newValue);
+    Promise.resolve(this.style.loaded() || this.once("styledata")).then(() => {
+      filterByDate(this, newValue);
+      this.fire("americana.datechanged");
+    });
+  }
 }

src/js/map_view.ts

@@ -0,0 +1,52 @@
+import { Timescope } from "timescope";
+
+export class TimeControl {
+  _update() {
+    //    this._timescope.setTime(this._map.date);
+  }
+
+  _onTimeChanged(event) {
+    const time = event.value;
+    if (time) {
+      const date = new Date(time.mul(1000).number());
+      this._map.date = date;
+    }
+  }
+
+  onAdd(map) {
+    this._map = map;
+
+    this._container = document.createElement("div");
+    this._container.className = "maplibregl-ctrl maplibregl-ctrl-group";
+    this._container.id = "maplibregl-ctrl-time";
+
+    Promise.resolve(this._map.loaded() || this._map.once("load")).then(() => {
+      this._timescope = new Timescope({
+        target: "#maplibregl-ctrl-time",
+        style: {
+          width: "50vw",
+        },
+        timeRange: [new Date("1800-01-01"), null],
+        time: null,
+        zoom: -20,
+        tracks: {
+          timeAxis: {
+            timeFormat: ({ time }) =>
+              new Date(time.mul(1000).number()).toLocaleDateString(),
+          },
+        },
+      });
+      this._timescope.on("timechanged", (event) => this._onTimeChanged(event));
+    });
+    this._map.on("americana.datechanged", () => this._update());
+
+    return this._container;
+  }
+
+  onRemove() {
+    this._container.remove();
+    this._timescope.dispose();
+    this._map.off("americana.datechanged");
+    this._map = undefined;
+  }
+}