Show timeliness information on the bottom left of map view. (#349)

* fix height and always show attribution on mobile. * add linting to CI
protomaps · Jan 7, 2025 · 8b523a8 · 8b523a8
1 parent f2a8d08
commit 8b523a8
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 13 deletions.
diff --git a/.github/workflows/app.yml b/.github/workflows/app.yml
@@ -22,7 +22,7 @@ jobs:
       - name: Check styles
         run: npm ci && npm run tsc && npm run check
         working-directory: styles
-      - run: npm ci && npm run test && npm run build
+      - run: npm ci && npm run test && npm run check && npm run build
         working-directory: app
       - name: Generate styles typedoc
         run: npx typedoc src/index.ts --out ../app/dist/typedoc

diff --git a/app/src/Builds.tsx b/app/src/Builds.tsx
@@ -187,7 +187,18 @@ function Builds() {
       <Nav page={1} />
       <div class="max-w-[1500px] mx-auto">
         <h1 class="my-8 text-4xl">Builds</h1>
-        <p>See the <a class="underline" href="https://docs.protomaps.com/basemaps/downloads" target="_blank">Documentation</a> for how to use.</p>
+        <p>
+          See the{" "}
+          <a
+            class="underline"
+            href="https://docs.protomaps.com/basemaps/downloads"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Documentation
+          </a>{" "}
+          for how to use.
+        </p>
         <div class="space-x-2 my-2">
           <button class="btn-primary" type="button" onClick={openVisualTests}>
             Compare selected versions

diff --git a/app/src/MapView.tsx b/app/src/MapView.tsx
@@ -4,16 +4,16 @@ import "./index.css";
 import MaplibreInspect from "@maplibre/maplibre-gl-inspect";
 import "@maplibre/maplibre-gl-inspect/dist/maplibre-gl-inspect.css";
 import {
-  Map,
-  addProtocol,
-  getRTLTextPluginStatus,
-  setRTLTextPlugin,
-  NavigationControl,
+  AttributionControl,
   GeolocateControl,
   GlobeControl,
+  Map as MaplibreMap,
+  NavigationControl,
   Popup,
-  ScaleControl,
+  addProtocol,
+  getRTLTextPluginStatus,
   removeProtocol,
+  setRTLTextPlugin,
 } from "maplibre-gl";
 import type { MapGeoJSONFeature, StyleSpecification } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
@@ -184,11 +184,12 @@ function MapLibreView(props: {
   droppedArchive?: PMTiles;
 }) {
   let mapContainer: HTMLDivElement | undefined;
-  let mapRef: Map | undefined;
+  let mapRef: MaplibreMap | undefined;
   let protocolRef: Protocol | undefined;
   let hiddenRef: HTMLDivElement | undefined;
 
   const [error, setError] = createSignal<string | undefined>();
+  const [timelinessInfo, setTimelinessInfo] = createSignal<string>();
 
   onMount(() => {
     if (getRTLTextPluginStatus() === "unavailable") {
@@ -207,14 +208,14 @@ function MapLibreView(props: {
     protocolRef = protocol;
     addProtocol("pmtiles", protocol.tile);
 
-    const map = new Map({
+    const map = new MaplibreMap({
       hash: "map",
       container: mapContainer,
       style: getMaplibreStyle("", "en", false),
+      attributionControl: false,
     });
 
     map.addControl(new NavigationControl());
-    map.addControl(new ScaleControl());
     map.addControl(new GlobeControl());
     map.addControl(
       new GeolocateControl({
@@ -228,6 +229,12 @@ function MapLibreView(props: {
       }),
     );
 
+    map.addControl(
+      new AttributionControl({
+        compact: false,
+      }),
+    );
+
     map.addControl(
       new MaplibreInspect({
         popup: new Popup({
@@ -249,6 +256,20 @@ function MapLibreView(props: {
 
     map.on("idle", () => {
       setError(undefined);
+      if (protocolRef && props.tiles) {
+        const p = protocolRef.tiles.get(props.tiles);
+        p?.getMetadata().then((metadata) => {
+          if (metadata) {
+            const m = metadata as {
+              version?: string;
+              "planetiler:osm:osmosisreplicationtime"?: string;
+            };
+            setTimelinessInfo(
+              `tiles@${m.version} ${m["planetiler:osm:osmosisreplicationtime"]?.substr(0, 10)}`,
+            );
+          }
+        });
+      }
     });
 
     map.on("contextmenu", (e) => {
@@ -327,7 +348,10 @@ function MapLibreView(props: {
   return (
     <>
       <div class="hidden" ref={hiddenRef} />
-      <div ref={mapContainer} class="h-100 w-full flex" />
+      <div ref={mapContainer} class="h-full w-full flex" />
+      <div class="absolute bottom-0 p-1 text-xs bg-white bg-opacity-50">
+        {timelinessInfo()}
+      </div>
       <Show when={error()}>
         <div class="absolute h-20 w-full flex justify-center items-center bg-white bg-opacity-50 font-mono text-red">
           {error()}
@@ -431,7 +455,7 @@ function MapView() {
   language_script_pairs.sort((a, b) => a.full_name.localeCompare(b.full_name));
 
   return (
-    <div class="flex flex-col h-screen w-full">
+    <div class="flex flex-col h-dvh w-full">
       <Nav page={0} />
       <div class="max-w-[1500px] mx-auto">
         <form onSubmit={loadTiles} class="flex">