improvements to inspector app

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;