add show debug boxes to viewer [#286]

protomaps · Sep 17, 2024 · 49830cb · 49830cb
1 parent 60e7d48
commit 49830cb
Showing 1 changed file with 20 additions and 0 deletions.
diff --git a/app/src/MapViewComponent.tsx b/app/src/MapViewComponent.tsx
@@ -159,6 +159,7 @@ function MapLibreView(props: {
   theme: string;
   lang: string;
   localSprites: boolean;
+  showBoxes: boolean;
   tiles?: string;
   npmLayers: LayerSpecification[];
   droppedArchive?: PMTiles;
@@ -246,6 +247,13 @@ function MapLibreView(props: {
     }
   }, [props.droppedArchive]);
 
+  useEffect(() => {
+    if (mapRef.current) {
+      mapRef.current.showTileBoundaries = props.showBoxes;
+      mapRef.current.showCollisionBoxes = props.showBoxes;
+    }
+  }, [props.showBoxes]);
+
   useEffect(() => {
     (async () => {
       if (mapRef.current) {
@@ -291,6 +299,9 @@ export default function MapViewComponent() {
   const [localSprites, setLocalSprites] = useState<boolean>(
     hash.local_sprites === "true",
   );
+  const [showBoxes, setShowBoxes] = useState<boolean>(
+    hash.show_boxes === "true",
+  );
   const [showStyleJson, setShowStyleJson] = useState<boolean>(false);
   const [publishedStyleVersion, setPublishedStyleVersion] = useState<
     string | undefined
@@ -305,6 +316,7 @@ export default function MapViewComponent() {
       lang: lang,
       tiles: tiles,
       local_sprites: localSprites ? "true" : undefined,
+      show_boxes: showBoxes ? "true" : undefined,
       npm_version: publishedStyleVersion,
     };
     location.hash = createHash(location.hash, record);
@@ -416,6 +428,13 @@ export default function MapViewComponent() {
           onChange={(e) => setLocalSprites(e.currentTarget.checked)}
         />
         <label htmlFor="localSprites">local sprites</label>
+        <input
+          id="showBoxes"
+          type="checkbox"
+          checked={showBoxes}
+          onChange={(e) => setShowBoxes(e.currentTarget.checked)}
+        />
+        <label htmlFor="showBoxes">boxes</label>
         {knownNpmVersions.length === 0 ? (
           <button type="button" onClick={loadVersionsFromNpm}>
             npm version...
@@ -451,6 +470,7 @@ export default function MapViewComponent() {
         <MapLibreView
           tiles={tiles}
           localSprites={localSprites}
+          showBoxes={showBoxes}
           theme={theme}
           lang={lang}
           npmLayers={npmLayers}