app: show local filename in top bar (#572)

* fix URL state of showTileBoundaries
* improve cursor hover

app/src/Frame.tsx

@@ -200,6 +200,16 @@ export function Frame(props: {
           <h1 class="hidden md:inline text-xl mx-5">{pageTitle}</h1>
           <form class="flex flex-1 items-center" onSubmit={loadTileset}>
             <span class="relative flex flex-1 items-center app-border">
+              <Show
+                when={
+                  props.tileset() &&
+                  props.tileset()?.getStateUrl() === undefined
+                }
+              >
+                <span class="bg-yellow-500 rounded px-2 text-sm text-black">
+                  local file {props.tileset()?.getLocalFileName()}
+                </span>
+              </Show>
               <input
                 class="px-2 flex-1"
                 type="text"

app/src/PageMap.tsx

@@ -369,6 +369,10 @@ function MapView(props: {
       fitToBounds();
     }
 
+    if (props.showTileBoundaries()) {
+      map.showTileBoundaries = true;
+    }
+
     setZoom(map.getZoom());
     map.on("zoom", (e) => {
       setZoom(e.target.getZoom());
@@ -461,7 +465,7 @@ function MapView(props: {
           </button>
           <span class="app-border rounded px-2 flex items-center">
             <input
-              class="mr-1"
+              class="mr-1 cursor-pointer"
               id="inspectFeatures"
               checked={props.inspectFeatures()}
               type="checkbox"
@@ -469,11 +473,13 @@ function MapView(props: {
                 props.setInspectFeatures(!props.inspectFeatures());
               }}
             />
-            <label for="inspectFeatures">Inspect features</label>
+            <label for="inspectFeatures" class="cursor-pointer">
+              Inspect features
+            </label>
           </span>
           <span class="app-border rounded px-2 flex items-center">
             <input
-              class="mr-1"
+              class="mr-1 cursor-pointer"
               id="showTileBoundaries"
               checked={props.showTileBoundaries()}
               type="checkbox"
@@ -481,7 +487,9 @@ function MapView(props: {
                 props.setShowTileBoundaries(!props.showTileBoundaries());
               }}
             />
-            <label for="showTileBoundaries">Show tile bounds</label>
+            <label class="cursor-pointer" for="showTileBoundaries">
+              Show tile bounds
+            </label>
           </span>
           <button
             class="px-4 py-1 btn-secondary cursor-pointer"

app/src/tileset.ts

@@ -16,6 +16,7 @@ export interface Tileset {
   getZxy(z: number, x: number, y: number): Promise<ArrayBuffer | undefined>;
   getMetadata(): Promise<Metadata>;
   getStateUrl(): string | undefined;
+  getLocalFileName(): string;
   getMaplibreSourceUrl(): string;
   getBounds(): Promise<[number, number, number, number]>;
   getMaxZoom(): Promise<number>;
@@ -91,6 +92,10 @@ class RemotePMTilesTileset extends PMTilesTileset implements Tileset {
     return this.url;
   }
 
+  getLocalFileName() {
+    return "";
+  }
+
   getMaplibreSourceUrl() {
     return `pmtiles://${this.url}`;
   }
@@ -113,6 +118,10 @@ class LocalPMTilesTileset extends PMTilesTileset implements Tileset {
     return undefined;
   }
 
+  getLocalFileName() {
+    return this.name;
+  }
+
   getMaplibreSourceUrl() {
     return `pmtiles://${this.name}`;
   }
@@ -169,6 +178,10 @@ class TileJSONTileset implements Tileset {
     return this.url;
   }
 
+  getLocalFileName() {
+    return "";
+  }
+
   async getZxy(z: number, x: number, y: number) {
     const resp = await fetch(this.url);
     const j = await resp.json();