From e57b5cf519a6f18b5e85d2fe9bdf7c99ebb12018 Mon Sep 17 00:00:00 2001
From: Brandon Liu <bdon@bdon.org>
Date: Mon, 20 Jan 2025 01:13:25 +0800
Subject: [PATCH 1/5] Improve basemaps app

* detect case when tileset mismatches style version
* improve css of Style JSON popout
* add way to clear the dropped archive
---
 app/src/MapView.tsx | 153 ++++++++++++++++++++++++++++++--------------
 1 file changed, 106 insertions(+), 47 deletions(-)

diff --git a/app/src/MapView.tsx b/app/src/MapView.tsx
index fea945f0..76da3c58 100644
--- a/app/src/MapView.tsx
+++ b/app/src/MapView.tsx
@@ -52,6 +52,9 @@ function getSourceLayer(l: LayerSpecification): string {
   return "";
 }
 
+const areSetsEqual = (a: Set<string>, b: Set<string>) =>
+  a.size === b.size && [...a].every((value) => b.has(value));
+
 const featureIdToOsmId = (raw: string | number) => {
   return Number(BigInt(raw) & ((BigInt(1) << BigInt(44)) - BigInt(1)));
 };
@@ -181,7 +184,7 @@ function StyleJsonPane(props: { theme: string; lang: string }) {
   });
 
   return (
-    <div class="w-1/2 overflow-x-scroll overflow-y-scroll p-2">
+    <div class="w-1/2 h-full w-full p-2 flex flex-col">
       <button
         type="button"
         class="btn-primary"
@@ -191,7 +194,10 @@ function StyleJsonPane(props: { theme: string; lang: string }) {
       >
         Copy to clipboard
       </button>
-      <textarea readonly class="text-xs mt-4 h-full w-full">
+      <textarea
+        readonly
+        class="text-xs font-mono p-2 border mt-4 w-full overflow-x-scroll overflow-y-scroll flex-1"
+      >
         {stringified()}
       </textarea>
     </div>
@@ -212,13 +218,15 @@ function MapLibreView(props: {
 }) {
   let mapContainer: HTMLDivElement | undefined;
   let mapRef: MaplibreMap | undefined;
-  let protocolRef: Protocol | undefined;
   let hiddenRef: HTMLDivElement | undefined;
   let longPressTimeout: ReturnType<typeof setTimeout>;
 
   const [error, setError] = createSignal<string | undefined>();
   const [timelinessInfo, setTimelinessInfo] = createSignal<string>();
+  const [protocolRef, setProtocolRef] = createSignal<Protocol | undefined>();
   const [zoom, setZoom] = createSignal<number>(0);
+  const [mismatchedTilesetVersion, setMismatchedTilesetVersion] =
+    createSignal<boolean>(false);
 
   onMount(() => {
     props.ref?.({ fit });
@@ -236,7 +244,7 @@ function MapLibreView(props: {
     }
 
     const protocol = new Protocol({ metadata: true });
-    protocolRef = protocol;
+    setProtocolRef(protocol);
     addProtocol("pmtiles", protocol.tile);
 
     const map = new MaplibreMap({
@@ -288,9 +296,9 @@ function MapLibreView(props: {
     map.on("idle", () => {
       setZoom(map.getZoom());
       setError(undefined);
-      if (protocolRef && props.tiles) {
-        const p = protocolRef.tiles.get(props.tiles);
-        p?.getMetadata().then((metadata) => {
+      memoizedArchive()
+        ?.getMetadata()
+        .then((metadata) => {
           if (metadata) {
             const m = metadata as {
               version?: string;
@@ -301,7 +309,6 @@ function MapLibreView(props: {
             );
           }
         });
-      }
     });
 
     const showContextMenu = (e: MapTouchEvent) => {
@@ -348,58 +355,90 @@ function MapLibreView(props: {
     mapRef = map;
 
     return () => {
-      protocolRef = undefined;
+      setProtocolRef(undefined);
       removeProtocol("pmtiles");
       map.remove();
     };
   });
 
-  const fit = async () => {
-    if (protocolRef) {
-      let archive = props.droppedArchive;
-      if (!archive && props.tiles) {
-        archive = new PMTiles(props.tiles);
-        protocolRef.add(archive);
-      }
-      if (archive) {
-        const header = await archive.getHeader();
-        mapRef?.fitBounds(
-          [
-            [header.minLon, header.minLat],
-            [header.maxLon, header.maxLat],
-          ],
-          { animate: false },
-        );
+  // ensure the dropped archive is first added to the protocol
+  const memoizedArchive = () => {
+    const p = protocolRef();
+    if (p) {
+      if (props.droppedArchive) {
+        p.add(props.droppedArchive);
+        return props.droppedArchive;
+      } else if (props.tiles) {
+        let archive = p.tiles.get(props.tiles);
+        if (!archive) {
+          archive = new PMTiles(props.tiles);
+          p.add(archive);
+        }
+        return archive;
       }
     }
   };
 
-  createEffect(() => {
-    if (mapRef) {
-      mapRef.showTileBoundaries = props.showBoxes;
-      mapRef.showCollisionBoxes = props.showBoxes;
+  const fit = async () => {
+    const header = await memoizedArchive()?.getHeader();
+    if (header) {
+      mapRef?.fitBounds(
+        [
+          [header.minLon, header.minLat],
+          [header.maxLon, header.maxLat],
+        ],
+        { animate: false },
+      );
     }
+  };
+
+  const memoizedStyle = createMemo(() => {
+    return getMaplibreStyle(
+      props.theme,
+      props.lang,
+      props.localSprites,
+      props.tiles,
+      props.npmLayers,
+      props.droppedArchive,
+    );
   });
 
   createEffect(() => {
-    // ensure the dropped archive is first added to the protocol
-    if (protocolRef && props.droppedArchive) {
-      protocolRef.add(props.droppedArchive);
+    const layersInStyle = new Set(
+      memoizedStyle()
+        .layers.map((l) => {
+          if ("source-layer" in l) {
+            return l["source-layer"];
+          }
+        })
+        .filter((v) => v !== undefined),
+    );
+    memoizedArchive()
+      ?.getMetadata()
+      .then((m) => {
+        if (
+          m instanceof Object &&
+          "vector_layers" in m &&
+          m.vector_layers instanceof Array
+        ) {
+          const layersInTiles = new Set(m.vector_layers.map((v) => v.id));
+          if (!areSetsEqual(layersInTiles, layersInStyle)) {
+            setMismatchedTilesetVersion(true);
+          }
+        }
+      });
+  });
+
+  createEffect(() => {
+    if (mapRef) {
+      mapRef.showTileBoundaries = props.showBoxes;
+      mapRef.showCollisionBoxes = props.showBoxes;
     }
   });
 
   createEffect(() => {
     if (mapRef) {
-      mapRef.setStyle(
-        getMaplibreStyle(
-          props.theme,
-          props.lang,
-          props.localSprites,
-          props.tiles,
-          props.npmLayers,
-          props.droppedArchive,
-        ),
-      );
+      mapRef.setStyle(memoizedStyle());
     }
   });
 
@@ -408,11 +447,22 @@ function MapLibreView(props: {
       <div class="hidden" ref={hiddenRef} />
       <div ref={mapContainer} class="h-full w-full flex" />
       <div class="absolute bottom-0 p-1 text-xs bg-white bg-opacity-50">
-        {timelinessInfo()} z@{zoom().toFixed(2)} (drag a local .pmtiles here to
-        view)
+        {timelinessInfo()} z@{zoom().toFixed(2)}
+        <div class="hidden lg:block font-bold">Drag .pmtiles here to view</div>
+        <Show when={mismatchedTilesetVersion()}>
+          <div class="font-bold">
+            This style version may not be compatible with the tileset.{" "}
+            <a
+              class="underline"
+              href="https://docs.protomaps.com/basemaps/downloads#current-version"
+            >
+              See Docs.
+            </a>
+          </div>
+        </Show>
       </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">
+        <div class="absolute p-8 flex justify-center items-center bg-white bg-opacity-50 font-mono text-red">
           {error()}
         </div>
       </Show>
@@ -433,7 +483,7 @@ function MapView() {
   const [showBoxes, setShowBoxes] = createSignal<boolean>(
     hash.show_boxes === "true",
   );
-  const [showStyleJson, setShowStyleJson] = createSignal<boolean>(false);
+  const [showStyleJson, setShowStyleJson] = createSignal<boolean>(true);
   const [publishedStyleVersion, setPublishedStyleVersion] = createSignal<
     string | undefined
   >(hash.npm_version);
@@ -519,6 +569,10 @@ function MapView() {
     maplibreView()?.fit();
   };
 
+  const clearDroppedArchive = () => {
+    setDroppedArchive(undefined);
+  };
+
   return (
     <div class="flex flex-col h-dvh w-full">
       <Nav page={0} />
@@ -528,6 +582,12 @@ function MapView() {
             <div class="flex-1 font-mono">
               Dropped file {droppedArchive()?.source.getKey()}
             </div>
+            <button
+              class="btn-primary bg-gray text-black"
+              onClick={clearDroppedArchive}
+            >
+              close
+            </button>
           </Show>
           <Show when={!droppedArchive()}>
             <input
@@ -535,7 +595,6 @@ function MapView() {
               type="text"
               name="tiles"
               value={tiles()}
-              style={{ width: "50%" }}
               autocomplete="off"
             />
             <button class="btn-primary" type="submit">

From 5af29f7ef95578715d3a57031b56ccf4a122b8f5 Mon Sep 17 00:00:00 2001
From: Brandon Liu <bdon@bdon.org>
Date: Mon, 20 Jan 2025 01:13:47 +0800
Subject: [PATCH 2/5] fix

---
 app/src/MapView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/MapView.tsx b/app/src/MapView.tsx
index 76da3c58..7378aa98 100644
--- a/app/src/MapView.tsx
+++ b/app/src/MapView.tsx
@@ -483,7 +483,7 @@ function MapView() {
   const [showBoxes, setShowBoxes] = createSignal<boolean>(
     hash.show_boxes === "true",
   );
-  const [showStyleJson, setShowStyleJson] = createSignal<boolean>(true);
+  const [showStyleJson, setShowStyleJson] = createSignal<boolean>(false);
   const [publishedStyleVersion, setPublishedStyleVersion] = createSignal<
     string | undefined
   >(hash.npm_version);

From f8961101bbacdfbeba2e7a47c4fb3c09ecca692c Mon Sep 17 00:00:00 2001
From: Brandon Liu <bdon@bdon.org>
Date: Mon, 20 Jan 2025 10:01:44 +0800
Subject: [PATCH 3/5] add explicit version check

* hide tile URLs in hash if it's the default
---
 app/src/MapView.tsx | 73 ++++++++++++++++++++++++++-------------------
 1 file changed, 42 insertions(+), 31 deletions(-)

diff --git a/app/src/MapView.tsx b/app/src/MapView.tsx
index 7378aa98..7ffcbfb1 100644
--- a/app/src/MapView.tsx
+++ b/app/src/MapView.tsx
@@ -42,6 +42,17 @@ import {
   parseHash,
 } from "./utils";
 
+const STYLE_MAJOR_VERSION = 4;
+
+const DEFAULT_TILES = "https://demo-bucket.protomaps.com/v4.pmtiles";
+
+const VERSION_COMPATIBILITY: Record<number, number[]> = {
+  4: [4],
+  3: [3],
+  2: [2],
+  1: [1],
+};
+
 const ATTRIBUTION =
   '<a href="https://github.com/protomaps/basemaps">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>';
 
@@ -52,9 +63,6 @@ function getSourceLayer(l: LayerSpecification): string {
   return "";
 }
 
-const areSetsEqual = (a: Set<string>, b: Set<string>) =>
-  a.size === b.size && [...a].every((value) => b.has(value));
-
 const featureIdToOsmId = (raw: string | number) => {
   return Number(BigInt(raw) & ((BigInt(1) << BigInt(44)) - BigInt(1)));
 };
@@ -213,6 +221,7 @@ function MapLibreView(props: {
   showBoxes: boolean;
   tiles?: string;
   npmLayers: LayerSpecification[];
+  npmVersion?: string;
   droppedArchive?: PMTiles;
   ref?: (ref: MapLibreViewRef) => void;
 }) {
@@ -225,8 +234,7 @@ function MapLibreView(props: {
   const [timelinessInfo, setTimelinessInfo] = createSignal<string>();
   const [protocolRef, setProtocolRef] = createSignal<Protocol | undefined>();
   const [zoom, setZoom] = createSignal<number>(0);
-  const [mismatchedTilesetVersion, setMismatchedTilesetVersion] =
-    createSignal<boolean>(false);
+  const [mismatch, setMismatch] = createSignal<string>("");
 
   onMount(() => {
     props.ref?.({ fit });
@@ -404,26 +412,24 @@ function MapLibreView(props: {
   });
 
   createEffect(() => {
-    const layersInStyle = new Set(
-      memoizedStyle()
-        .layers.map((l) => {
-          if ("source-layer" in l) {
-            return l["source-layer"];
-          }
-        })
-        .filter((v) => v !== undefined),
-    );
+    const styleMajorVersion = props.npmVersion
+      ? +props.npmVersion.split(".")[0]
+      : STYLE_MAJOR_VERSION;
+    console.log(styleMajorVersion);
     memoizedArchive()
       ?.getMetadata()
       .then((m) => {
-        if (
-          m instanceof Object &&
-          "vector_layers" in m &&
-          m.vector_layers instanceof Array
-        ) {
-          const layersInTiles = new Set(m.vector_layers.map((v) => v.id));
-          if (!areSetsEqual(layersInTiles, layersInStyle)) {
-            setMismatchedTilesetVersion(true);
+        if (m instanceof Object && "version" in m) {
+          const tilesetVersion = +(m.version as string).split(".")[0];
+          console.log(tilesetVersion);
+          if (
+            VERSION_COMPATIBILITY[tilesetVersion].indexOf(styleMajorVersion) < 0
+          ) {
+            setMismatch(
+              `style v${styleMajorVersion} may not be compatible with tileset v${tilesetVersion}. `,
+            );
+          } else {
+            setMismatch("");
           }
         }
       });
@@ -449,9 +455,9 @@ function MapLibreView(props: {
       <div class="absolute bottom-0 p-1 text-xs bg-white bg-opacity-50">
         {timelinessInfo()} z@{zoom().toFixed(2)}
         <div class="hidden lg:block font-bold">Drag .pmtiles here to view</div>
-        <Show when={mismatchedTilesetVersion()}>
-          <div class="font-bold">
-            This style version may not be compatible with the tileset.{" "}
+        <Show when={mismatch()}>
+          <div class="font-bold text-red">
+            {mismatch()}
             <a
               class="underline"
               href="https://docs.protomaps.com/basemaps/downloads#current-version"
@@ -474,9 +480,7 @@ function MapView() {
   const hash = parseHash(location.hash);
   const [theme, setTheme] = createSignal<string>(hash.theme || "light");
   const [lang, setLang] = createSignal<string>(hash.lang || "en");
-  const [tiles, setTiles] = createSignal<string>(
-    hash.tiles || "https://demo-bucket.protomaps.com/v4.pmtiles",
-  );
+  const [tiles, setTiles] = createSignal<string>(hash.tiles || DEFAULT_TILES);
   const [localSprites, setLocalSprites] = createSignal<boolean>(
     hash.local_sprites === "true",
   );
@@ -496,10 +500,16 @@ function MapView() {
     const record = {
       theme: theme(),
       lang: lang(),
-      tiles: droppedArchive() ? undefined : tiles(),
+      tiles: droppedArchive()
+        ? undefined
+        : tiles() === DEFAULT_TILES
+          ? undefined
+          : tiles(),
       local_sprites: localSprites() ? "true" : undefined,
       show_boxes: showBoxes() ? "true" : undefined,
-      npm_version: publishedStyleVersion(),
+      npm_version: publishedStyleVersion()
+        ? publishedStyleVersion()
+        : undefined,
     };
     location.hash = createHash(location.hash, record);
   });
@@ -555,7 +565,7 @@ function MapView() {
   createEffect(() => {
     (async () => {
       const psv = publishedStyleVersion();
-      if (psv === undefined) {
+      if (psv === undefined || psv === "") {
         setNpmLayers([]);
       } else {
         setNpmLayers(await layersForVersion(psv, theme()));
@@ -709,6 +719,7 @@ function MapView() {
           theme={theme()}
           lang={lang()}
           npmLayers={npmLayers()}
+          npmVersion={publishedStyleVersion()}
           droppedArchive={droppedArchive()}
         />
         <Show when={showStyleJson()}>

From dc87a813ca85befb6320c9b155656ed703e33b8d Mon Sep 17 00:00:00 2001
From: Brandon Liu <bdon@bdon.org>
Date: Mon, 20 Jan 2025 10:17:30 +0800
Subject: [PATCH 4/5] linting

---
 app/src/MapView.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/src/MapView.tsx b/app/src/MapView.tsx
index 7ffcbfb1..013025c0 100644
--- a/app/src/MapView.tsx
+++ b/app/src/MapView.tsx
@@ -376,7 +376,8 @@ function MapLibreView(props: {
       if (props.droppedArchive) {
         p.add(props.droppedArchive);
         return props.droppedArchive;
-      } else if (props.tiles) {
+      }
+      if (props.tiles) {
         let archive = p.tiles.get(props.tiles);
         if (!archive) {
           archive = new PMTiles(props.tiles);
@@ -595,6 +596,7 @@ function MapView() {
             <button
               class="btn-primary bg-gray text-black"
               onClick={clearDroppedArchive}
+              type="button"
             >
               close
             </button>

From 71812b79e09239182c01c53f65ffb3577823d558 Mon Sep 17 00:00:00 2001
From: Brandon Liu <bdon@bdon.org>
Date: Mon, 20 Jan 2025 10:18:02 +0800
Subject: [PATCH 5/5] remove print statements

---
 app/src/MapView.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/src/MapView.tsx b/app/src/MapView.tsx
index 013025c0..103f98b8 100644
--- a/app/src/MapView.tsx
+++ b/app/src/MapView.tsx
@@ -416,13 +416,11 @@ function MapLibreView(props: {
     const styleMajorVersion = props.npmVersion
       ? +props.npmVersion.split(".")[0]
       : STYLE_MAJOR_VERSION;
-    console.log(styleMajorVersion);
     memoizedArchive()
       ?.getMetadata()
       .then((m) => {
         if (m instanceof Object && "version" in m) {
           const tilesetVersion = +(m.version as string).split(".")[0];
-          console.log(tilesetVersion);
           if (
             VERSION_COMPATIBILITY[tilesetVersion].indexOf(styleMajorVersion) < 0
           ) {