improvements to inspector app

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 |{" "}
+        <Title onClick={clear}>PMTiles Viewer</Title>
-        {GIT_SHA}
+        <GithubLink>
+          <GithubA href="https://github.com/protomaps/PMTiles" target="_blank">
+            <GitHubLogoIcon /> {GIT_SHA}
+          </GithubA>
+        </GithubLink>
       </Header>
       {file ? <Loader file={file} /> : <Start setFile={setFile} />}
     </div>

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 (

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);
+    map = L.map("map").setView([0, 0], 0);
-    leafletLayer(props.file, {
-      attribution:
-        '© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
-    }).addTo(map);
 
     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>;
 }
 

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",
+  color: "$black",
-  height: 25,
-  padding: "0 5px",
-  borderRadius: 4,
   display: "inline-flex",
-  fontSize: 13,
+  padding: "0 $1 0 $1",
-  lineHeight: 1,
+  fontSize: "$2",
   alignItems: "center",
-  justifyContent: "center",
+  "&:hover": { backgroundColor: "$hover", color: "$white" },
-  "&:hover": { backgroundColor: "$hover", color: "blue" },
   "&: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",
+  maxWidth: "80vh",
-  maxHeight: "85vh",
-  padding: 25,
   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}
     </>
   );

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: [
+    layers: 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,
-        },
-      },
-    ],
   };
 };
 
-function MaplibreMap(props: { file: PMTiles; tileType: string | null }) {
+function MaplibreMap(props: { file: PMTiles }) {
-  let mapRef = useRef<HTMLDivElement>(null);
+  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({
+    map = new maplibregl.Map({
-      container: "map",
+      container: mapContainerRef.current!,
       zoom: 0,
       center: [0, 0],
-      style: rasterStyle(props.file) as any,
+      style: {
-    }); // TODO maplibre types (not any)
+        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;

app/src/Start.tsx

@@ -129,7 +129,7 @@ function Start(props: {
   };
 
   const onSubmit = () => {
-    // props.setFile(new PMTiles("abcd"));
+    props.setFile(new PMTiles(remoteUrl));
   };
 
   return (

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",
+			hover: "#7180B9",
-			selected: "#444",
+			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')"],

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);