inspector: improve type checks, map color scheme [#49]

protomaps · Dec 2, 2022 · 32828f3 · 32828f3
1 parent decf042
commit 32828f3
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 27 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -37,6 +37,7 @@
     "@types/pbf": "^3.0.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "@types/react-svg-pan-zoom": "^3.3.5",
     "@vitejs/plugin-react": "^1.3.0",
     "typescript": "^4.6.3",
     "vite": "^2.9.13"

diff --git a/app/src/Inspector.tsx b/app/src/Inspector.tsx
@@ -9,12 +9,7 @@ import { schemeSet3 } from "d3-scale-chromatic";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { useMeasure } from "react-use";
 import {
-  INITIAL_VALUE,
-  ReactSVGPanZoom,
-  TOOL_NONE,
-  fitSelection,
-  zoomOnViewerCenter,
-  fitToViewer,
+  UncontrolledReactSVGPanZoom,
 } from "react-svg-pan-zoom";
 
 const TableContainer = styled("div", {
@@ -40,6 +35,7 @@ const TableRow = styled(
   "tr",
   {
     cursor: "pointer",
+    fontFamily: "monospace"
   },
   { "&:hover": { color: "red" } }
 );
@@ -185,10 +181,12 @@ const VectorPreview = (props: {
 }) => {
   let [layers, setLayers] = useState<Layer[]>([]);
   let [selectedFeature, setSelectedFeature] = useState<Feature | null>(null);
-  const Viewer = useRef(null);
-  const [tool, setTool] = useState(TOOL_NONE);
-  const [value, setValue] = useState(INITIAL_VALUE);
-  const [ref, { width, height }] = useMeasure();
+  const Viewer = useRef<UncontrolledReactSVGPanZoom>(null);
+  const [ref, { width, height }] = useMeasure<HTMLDivElement>();
+
+  useEffect(() => {
+    Viewer.current!.zoomOnViewerCenter(0.1);
+  },[]);
 
   useEffect(() => {
     let fn = async (entry: Entry) => {
@@ -251,21 +249,17 @@ const VectorPreview = (props: {
 
   return (
     <SVGContainer ref={ref}>
-      <ReactSVGPanZoom
+      <UncontrolledReactSVGPanZoom
         ref={Viewer}
         width={width}
         height={height}
-        tool={tool}
-        onChangeTool={setTool}
-        value={value}
-        onChangeValue={setValue}
         detectAutoPan={false}
         onClick={(event) =>
           console.log("click", event.x, event.y, event.originalEvent)
         }
       >
         <svg viewBox="0 0 4096 4096">{elems}</svg>
-      </ReactSVGPanZoom>
+      </UncontrolledReactSVGPanZoom>
       {selectedFeature ? <FeatureProperties feature={selectedFeature} /> : null}
     </SVGContainer>
   );

diff --git a/app/src/MaplibreMap.tsx b/app/src/MaplibreMap.tsx
@@ -4,6 +4,7 @@ import { Protocol } from "../../js/adapters";
 import { styled } from "./stitches.config";
 import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
+import { schemeSet3 } from "d3-scale-chromatic";
 
 const MapContainer = styled("div", {
   height: "calc(100vh - $4 - $4)",
@@ -46,14 +47,14 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
   }
 
   if (vector_layers) {
-    for (let layer of vector_layers) {
+    for (let [i,layer] of vector_layers.entries()) {
       layers.push({
         id: layer.id + "_fill",
         type: "fill",
         source: "source",
         "source-layer": layer.id,
         paint: {
-          "fill-color": "white",
+          "fill-color": schemeSet3[i % 12],
           "fill-opacity": 0.2,
         },
         filter: ["==", ["geometry-type"], "Polygon"],
@@ -64,7 +65,7 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
         source: "source",
         "source-layer": layer.id,
         paint: {
-          "line-color": "steelblue",
+          "line-color": schemeSet3[i % 12],
           "line-width": 0.5,
         },
         filter: ["==", ["geometry-type"], "LineString"],
@@ -75,21 +76,21 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
         source: "source",
         "source-layer": layer.id,
         paint: {
-          "circle-color": "red",
+          "circle-color": schemeSet3[i % 12],
         },
         filter: ["==", ["geometry-type"], "Point"],
       });
     }
   } else if (tilestats) {
-    for (let layer of tilestats.layers) {
+    for (let [i,layer] of tilestats.layers.entries()) {
       if (layer.geometry === "Polygon") {
         layers.push({
           id: layer.layer + "_fill",
           type: "fill",
           source: "source",
           "source-layer": layer.layer,
           paint: {
-            "fill-color": "white",
+            "fill-color": schemeSet3[i % 12],
             "fill-opacity": 0.2,
           },
         });
@@ -100,7 +101,7 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
           source: "source",
           "source-layer": layer.layer,
           paint: {
-            "line-color": "steelblue",
+            "line-color": schemeSet3[i % 12],
             "line-width": 0.5,
           },
         });
@@ -111,7 +112,7 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
           source: "source",
           "source-layer": layer.layer,
           paint: {
-            "circle-color": "red",
+            "circle-color": schemeSet3[i % 12],
           },
         });
       }

diff --git a/app/src/stitches.config.ts b/app/src/stitches.config.ts
@@ -55,8 +55,6 @@ export const globalStyles = globalCss({
 		margin: 0,
 		padding: 0,
 		border: 0,
-		fontFamily: "Inter, sans-serif",
 	},
-	body: { backgroundColor: "$black", color: "$white" },
-	"@import": ["url('https://rsms.me/inter/inter.css')"],
+	body: { backgroundColor: "$black", color: "$white", fontFamily: "sans-serif" }
 });