improvements to inspector app

2026-02-04 10:51:07 +00:00 · 2022-06-13 16:48:58 +08:00
parent beef7a3ab7
commit 9962b4e344
8 changed files with 241 additions and 138 deletions
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -1,12 +1,31 @@
 import { useState, useEffect } from "react";
 import { styled, globalStyles } from "./stitches.config";
 import { PMTiles } from "../../js";
+import { GitHubLogoIcon } from "@radix-ui/react-icons";

 import Start from "./Start";
 import Loader from "./Loader";

 const Header = styled("div", {
  height: "$4",
+  display: "flex",
+  alignItems: "center",
+  padding: "0 $2 0 $2",
+});
+
+const Title = styled("span", {
+  fontWeight: 500,
+  cursor: "pointer",
+});
+
+const GithubA = styled("a", {
+  color: "white",
+  textDecoration: "none",
+  fontSize: "$1",
+});
+
+const GithubLink = styled("span", {
+  marginLeft: "auto",
 });

 const GIT_SHA = (import.meta.env.VITE_GIT_SHA || "").substr(0, 8);
@@ -37,8 +56,12 @@ function App() {
  return (
    <div>
      <Header>
-        <span onClick={clear}>pmtiles viewer</span> | github | toggle |{" "}
-        {GIT_SHA}
+        <Title onClick={clear}>PMTiles Viewer</Title>
+        <GithubLink>
+          <GithubA href="https://github.com/protomaps/PMTiles" target="_blank">
+            <GitHubLogoIcon /> {GIT_SHA}
+          </GithubA>
+        </GithubLink>
      </Header>
      {file ? <Loader file={file} /> : <Start setFile={setFile} />}
    </div>
--- a/app/src/Inspector.tsx
+++ b/app/src/Inspector.tsx
@@ -8,16 +8,24 @@ import { VectorTile, VectorTileFeature } from "@mapbox/vector-tile";
 import { path } from "d3-path";
 import { schemeSet3 } from "d3-scale-chromatic";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { introspectTileType, TileType } from "./Loader";

 const TableContainer = styled("div", {
-  height: "calc(100vh - $4)",
+  height: "calc(100vh - $4 - $4)",
  overflowY: "scroll",
  width: "50%",
+  padding: "$2",
 });

 const Pane = styled("div", {
  width: "50%",
  backgroundColor: "black",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundSize: "20px 20px",
+  backgroundImage:
+    "linear-gradient(to right, #222 1px, transparent 1px),linear-gradient(to bottom, #222 1px, transparent 1px);",
 });

 const TableRow = styled(
@@ -58,6 +66,7 @@ interface Layer {
 }

 interface Feature {
+  layerName: string;
  path: string;
  type: number;
  id: number;
@@ -148,7 +157,14 @@ const FeatureProperties = (props: { feature: Feature }) => {
    </tr>
  ));

-  return <StyledFeatureProperties>{rows}</StyledFeatureProperties>;
+  return (
+    <StyledFeatureProperties>
+      {props.feature.layerName}
+      <table>
+        <tbody>{rows}</tbody>
+      </table>
+    </StyledFeatureProperties>
+  );
 };

 const VectorPreview = (props: { file: PMTiles; entry: Entry }) => {
@@ -193,6 +209,7 @@ const VectorPreview = (props: { file: PMTiles; entry: Entry }) => {
            type: feature.type,
            id: feature.id,
            properties: feature.properties,
+            layerName: name,
          });
        }
        newLayers.push({ features: features, name: name });
@@ -248,11 +265,14 @@ const RasterPreview = (props: { file: PMTiles; entry: Entry }) => {
 function Inspector(props: { file: PMTiles }) {
  let [entryRows, setEntryRows] = useState<Entry[]>([]);
  let [selectedEntry, setSelectedEntry] = useState<Entry | null>(null);
+  let [tileType, setTileType] = useState<TileType>(TileType.UNKNOWN);

  useEffect(() => {
    let fn = async () => {
      let entries = await props.file.root_entries();
+      let tileType = await introspectTileType(props.file);
      setEntryRows(entries);
+      setTileType(tileType);
    };

    fn();
@@ -263,9 +283,12 @@ function Inspector(props: { file: PMTiles }) {
  ));

  let tilePreview = <div></div>;
-  if (selectedEntry) {
+  if (selectedEntry && tileType) {
+    if (tileType === TileType.MVT) {
      tilePreview = <VectorPreview file={props.file} entry={selectedEntry} />;
    } else {
+      tilePreview = <RasterPreview file={props.file} entry={selectedEntry} />;
+    }
  }

  return (
--- a/app/src/LeafletMap.tsx
+++ b/app/src/LeafletMap.tsx
@@ -1,26 +1,62 @@
 import { useState, useEffect } from "react";
-import { PMTiles, leafletLayer } from "../../js";
+import { PMTiles, leafletLayer as rasterLeafletLayer } from "../../js";
+import { leafletLayer as vectorLeafletLayer } from "protomaps";
 import { styled } from "./stitches.config";
+import { introspectTileType, TileType } from "./Loader";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";

 const MapContainer = styled("div", {
-  height: "calc(100vh - $4)",
+  height: "calc(100vh - $4 - $4)",
 });

-function LeafletMap(props: { file: PMTiles; tileType: string | null }) {
+function LeafletMap(props: { file: PMTiles }) {
+  var map: L.Map;
+  var currentLayer: L.Layer;
  useEffect(() => {
-    const map = L.map("map").setView([0, 0], 0);
-    leafletLayer(props.file, {
-      attribution:
-        '© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
-    }).addTo(map);
+    map = L.map("map").setView([0, 0], 0);

    return () => {
      map.remove();
    };
  }, []);

+  useEffect(() => {
+    if (currentLayer) currentLayer.remove();
+    let initStyle = async () => {
+      if (map) {
+        let tileType = await introspectTileType(props.file);
+        if (tileType === TileType.PNG || tileType == TileType.JPG) {
+          currentLayer = rasterLeafletLayer(props.file, {
+            attribution:
+              '© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
+          });
+          currentLayer.addTo(map);
+        } else {
+          console.error("leaflet vector preview not yet implemented");
+          // let metadata = await props.file.metadata();
+          // let rules: PaintRule[] = [];
+
+          // if (metadata.json) {
+          //   let root = JSON.parse(metadata.json);
+          //   if (root.tilestats) {
+          //     for (let layer of root.tilestats.layers) {
+          //       if (layer.geometry === "Polygon") {
+          //       } else if (layer.geometry === "LineString") {
+          //       } else {
+          //       }
+          //     }
+          //   }
+          // }
+
+          // currentLayer = vectorLeafletLayer(props.file, {paintRules:rules,labelRules:[]})
+        }
+      }
+    };
+
+    initStyle();
+  }, []);
+
  return <MapContainer id="map"></MapContainer>;
 }

--- a/app/src/Loader.tsx
+++ b/app/src/Loader.tsx
@@ -10,13 +10,20 @@ import { MagnifyingGlassIcon, ImageIcon } from "@radix-ui/react-icons";
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
 import * as DialogPrimitive from "@radix-ui/react-dialog";

+export enum TileType {
+  UNKNOWN = 1,
+  PNG,
+  JPG,
+  MVT,
+  MVT_GZ,
+}
+
 const StyledToolbar = styled(ToolbarPrimitive.Root, {
  display: "flex",
-  padding: 10,
+  height: "$4",
  width: "100%",
  boxSizing: "border-box",
  minWidth: "max-content",
-  borderRadius: 6,
  backgroundColor: "white",
  boxShadow: `0 2px 10px "black"`,
 });
@@ -24,31 +31,15 @@ const StyledToolbar = styled(ToolbarPrimitive.Root, {
 const itemStyles = {
  all: "unset",
  flex: "0 0 auto",
-  color: "black",
-  height: 25,
-  padding: "0 5px",
-  borderRadius: 4,
+  color: "$black",
  display: "inline-flex",
-  fontSize: 13,
-  lineHeight: 1,
+  padding: "0 $1 0 $1",
+  fontSize: "$2",
  alignItems: "center",
-  justifyContent: "center",
-  "&:hover": { backgroundColor: "$hover", color: "blue" },
+  "&:hover": { backgroundColor: "$hover", color: "$white" },
  "&:focus": { position: "relative", boxShadow: `0 0 0 2px blue` },
 };

-const StyledButton = styled(
-  ToolbarPrimitive.Button,
-  {
-    ...itemStyles,
-    paddingLeft: 10,
-    paddingRight: 10,
-    color: "white",
-    backgroundColor: "blue",
-  },
-  { "&:hover": { color: "white", backgroundColor: "red" } }
-);
-
 const StyledLink = styled(
  ToolbarPrimitive.Link,
  {
@@ -62,12 +53,6 @@ const StyledLink = styled(
  { "&:hover": { backgroundColor: "transparent", cursor: "pointer" } }
 );

-const StyledSeparator = styled(ToolbarPrimitive.Separator, {
-  width: 1,
-  backgroundColor: "black",
-  margin: "0 10px",
-});
-
 const StyledToggleGroup = styled(ToolbarPrimitive.ToggleGroup, {
  display: "inline-flex",
  borderRadius: 4,
@@ -79,7 +64,7 @@ const StyledToggleItem = styled(ToolbarPrimitive.ToggleItem, {
  backgroundColor: "white",
  marginLeft: 2,
  "&:first-child": { marginLeft: 0 },
-  "&[data-state=on]": { backgroundColor: "red", color: "blue" },
+  "&[data-state=on]": { backgroundColor: "$primary", color: "white" },
 });

 const StyledOverlay = styled(DialogPrimitive.Overlay, {
@@ -91,40 +76,52 @@ const StyledOverlay = styled(DialogPrimitive.Overlay, {
 });

 const StyledContent = styled(DialogPrimitive.Content, {
-  backgroundColor: "white",
+  backgroundColor: "$black",
  borderRadius: 6,
-  boxShadow:
-    "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
  position: "fixed",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: "90vw",
-  maxWidth: "450px",
-  maxHeight: "85vh",
-  padding: 25,
+  maxWidth: "80vh",
  zIndex: 4,
  "&:focus": { outline: "none" },
 });

+export const introspectTileType = async (file: PMTiles): Promise<TileType> => {
+  let magic = await file.source.getBytes(512000, 4);
+  let b0 = magic.getUint8(0);
+  let b1 = magic.getUint8(1);
+  let b2 = magic.getUint8(2);
+  let b3 = magic.getUint8(3);
+
+  if (b0 == 0x89 && b1 == 0x50 && b2 == 0x4e && b3 == 0x47) {
+    return TileType.PNG;
+  } else if (b0 == 0xff && b1 == 0xd8 && b2 == 0xff && b3 == 0xe0) {
+    return TileType.JPG;
+  } else if (b0 == 0x1f && b1 == 0x8b) {
+    return TileType.MVT_GZ;
+  } else {
+    return TileType.MVT;
+  }
+};
+
 const Toolbar = StyledToolbar;
-const ToolbarButton = StyledButton;
-const ToolbarSeparator = StyledSeparator;
 const ToolbarLink = StyledLink;
 const ToolbarToggleGroup = StyledToggleGroup;
 const ToolbarToggleItem = StyledToggleItem;

 function Loader(props: { file: PMTiles }) {
  let [tab, setTab] = useState("inspector");
-  let [tileType, setTileType] = useState<string | null>(null);
+  let [tileType, setTileType] = useState<TileType>(TileType.UNKNOWN);
  let [metadata, setMetadata] = useState<[string, string][]>([]);
  let [modalOpen, setModalOpen] = useState<boolean>(false);

  let view;
  if (tab === "leaflet") {
-    view = <LeafletMap file={props.file} tileType={tileType} />;
+    view = <LeafletMap file={props.file} />;
  } else if (tab === "maplibre") {
-    view = <MaplibreMap file={props.file} tileType={tileType} />;
+    view = <MaplibreMap file={props.file} />;
  } else {
    view = <Inspector file={props.file} />;
  }
@@ -138,22 +135,6 @@ function Loader(props: { file: PMTiles }) {
        tmp.push([key, m[key]]);
      }
      setMetadata(tmp);
-
-      let magic = await props.file.source.getBytes(512000, 4);
-      let b0 = magic.getUint8(0);
-      let b1 = magic.getUint8(1);
-      let b2 = magic.getUint8(2);
-      let b3 = magic.getUint8(3);
-
-      if (b0 == 0x89 && b1 == 0x50 && b2 == 0x4e && b3 == 0x47) {
-        setTileType("png");
-      } else if (b0 == 0xff && b1 == 0xd8 && b2 == 0xff && b3 == 0xe0) {
-        setTileType("jpg");
-      } else if (b0 == 0x1f && b1 == 0x8b) {
-        setTileType("mvt.gz");
-      } else {
-        setTileType("mvt");
-      }
    };
    fetchData();
  }, [props.file]);
@@ -189,20 +170,13 @@ function Loader(props: { file: PMTiles }) {
            MapLibre
          </ToolbarToggleItem>
        </ToolbarToggleGroup>
-        <ToolbarSeparator />
        <ToolbarLink href="#" target="_blank" css={{ marginRight: 10 }}>
          {props.file.source.getKey()}
        </ToolbarLink>
-        <ToolbarButton
-          css={{ marginLeft: "auto" }}
-          onClick={() => setModalOpen(true)}
-        >
-          Metadata
-        </ToolbarButton>
-      </Toolbar>
-
        <DialogPrimitive.Root open={modalOpen}>
-        <DialogPrimitive.Trigger />
+          <DialogPrimitive.Trigger onClick={() => setModalOpen(true)}>
+            Metadata
+          </DialogPrimitive.Trigger>
          <DialogPrimitive.Portal>
            <StyledOverlay />
            <StyledContent
@@ -224,6 +198,8 @@ function Loader(props: { file: PMTiles }) {
            </StyledContent>
          </DialogPrimitive.Portal>
        </DialogPrimitive.Root>
+      </Toolbar>
+
      {view}
    </>
  );
--- a/app/src/MaplibreMap.tsx
+++ b/app/src/MaplibreMap.tsx
@@ -1,11 +1,12 @@
 import { useState, useEffect, useRef } from "react";
 import { PMTiles, ProtocolCache } from "../../js";
 import { styled } from "./stitches.config";
+import { introspectTileType, TileType } from "./Loader";
 import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";

 const MapContainer = styled("div", {
-  height: "calc(100vh - $4)",
+  height: "calc(100vh - $4 - $4)",
 });

 const rasterStyle = (file: PMTiles) => {
@@ -28,53 +29,81 @@ const rasterStyle = (file: PMTiles) => {
  };
 };

-const vectorStyle = (file: PMTiles) => {
+const vectorStyle = async (file: PMTiles): Promise<any> => {
+  let metadata = await file.metadata();
+  let layers: any[] = [];
+
+  if (metadata.json) {
+    let root = JSON.parse(metadata.json);
+    if (root.tilestats) {
+      for (let layer of root.tilestats.layers) {
+        if (layer.geometry === "Polygon") {
+          layers.push({
+            id: layer.layer + "_fill",
+            type: "fill",
+            source: "source",
+            "source-layer": layer.layer,
+            paint: {
+              "fill-color": "white",
+            },
+          });
+        } else if (layer.geometry === "LineString") {
+          layers.push({
+            id: layer.layer + "_stroke",
+            type: "line",
+            source: "source",
+            "source-layer": layer.layer,
+            paint: {
+              "line-color": "steelblue",
+              "line-width": 0.5,
+            },
+          });
+        } else {
+          layers.push({
+            id: layer.layer + "_point",
+            type: "circle",
+            source: "source",
+            "source-layer": layer.layer,
+            paint: {
+              "circle-color": "red",
+            },
+          });
+        }
+      }
+    }
+  }
+
  return {
    version: 8,
    sources: {
      source: {
        type: "vector",
        tiles: ["pmtiles://" + file.source.getKey() + "/{z}/{x}/{y}"],
-        maxzoom: 7,
+        maxzoom: 10,
      },
    },
-    layers: [
-      {
-        id: "zcta_fill",
-        type: "fill",
-        source: "source",
-        "source-layer": "zcta",
-        paint: {
-          "fill-color": "white",
-        },
-      },
-      {
-        id: "zcta_stroke",
-        type: "line",
-        source: "source",
-        "source-layer": "zcta",
-        paint: {
-          "line-color": "steelblue",
-          "line-width": 0.5,
-        },
-      },
-    ],
+    layers: layers,
  };
 };

-function MaplibreMap(props: { file: PMTiles; tileType: string | null }) {
-  let mapRef = useRef<HTMLDivElement>(null);
+function MaplibreMap(props: { file: PMTiles }) {
+  let mapContainerRef = useRef<HTMLDivElement>(null);
+  let map: maplibregl.Map;
+
  useEffect(() => {
    let cache = new ProtocolCache();
    maplibregl.addProtocol("pmtiles", cache.protocol);
-    cache.add(props.file);

-    const map = new maplibregl.Map({
-      container: "map",
+    map = new maplibregl.Map({
+      container: mapContainerRef.current!,
      zoom: 0,
      center: [0, 0],
-      style: rasterStyle(props.file) as any,
-    }); // TODO maplibre types (not any)
+      style: {
+        version: 8,
+        sources: {},
+        layers: [],
+      },
+    });
    map.addControl(new maplibregl.NavigationControl({}));
    map.on("load", map.resize);

@@ -83,7 +112,24 @@ function MaplibreMap(props: { file: PMTiles; tileType: string | null }) {
    };
  }, []);

-  return <MapContainer id="map" ref={mapRef}></MapContainer>;
+  useEffect(() => {
+    let initStyle = async () => {
+      if (map) {
+        let tileType = await introspectTileType(props.file);
+        let style: any; // TODO maplibre types (not any)
+        if (tileType === TileType.PNG || tileType == TileType.JPG) {
+          map.setStyle(rasterStyle(props.file) as any);
+        } else {
+          let style = await vectorStyle(props.file);
+          map.setStyle(style);
+        }
+      }
+    };
+
+    initStyle();
+  }, []);
+
+  return <MapContainer ref={mapContainerRef}></MapContainer>;
 }

 export default MaplibreMap;
--- a/app/src/Start.tsx
+++ b/app/src/Start.tsx
@@ -129,7 +129,7 @@ function Start(props: {
  };

  const onSubmit = () => {
-    // props.setFile(new PMTiles("abcd"));
+    props.setFile(new PMTiles(remoteUrl));
  };

  return (
--- a/app/src/stitches.config.ts
+++ b/app/src/stitches.config.ts
@@ -5,8 +5,8 @@ export const { styled } = createStitches({
 		colors: {
 			black: "rgba(0, 0, 0)",
 			white: "rgba(236, 237, 238)",
-			hover: "#666",
-			selected: "#444",
+			hover: "#7180B9",
+			primary: "#3423A6",
 		},
 		fonts: {
 			sans: "Inter, sans-serif",
@@ -55,7 +55,6 @@ export const globalStyles = globalCss({
 		padding: 0,
 		border: 0,
 		fontFamily: "Inter, sans-serif",
-		xborder: "1px solid gold",
 	},
 	body: { backgroundColor: "$black", color: "$white" },
 	"@import": ["url('https://rsms.me/inter/inter.css')"],
--- a/js/index.ts
+++ b/js/index.ts
@@ -536,7 +536,7 @@ export class ProtocolCache {
        instance!.source
          .getBytes(val.offset, val.length)
          .then((arr) => {
-            callback(null, arr, null, null);
+            callback(null, new Uint8Array(arr.buffer), null, null);
          })
          .catch((e) => {
            callback(new Error("Canceled"), null, null, null);