Toggle tile boundaries

src/components/SphereMap/map-body.tsx

@@ -15,6 +15,7 @@ import { SphereSource } from "./SphereSource"
 import { SphereLayer } from "./SphereLayer"
 import Draw from "./Draw"
 import { createSelector } from "@reduxjs/toolkit"
+import useTileBoundaries from "@/sphere-hooks/useTileBoundaries"
 
 const selectLayers = createSelector([selectors.draw.isDrawing, selectors.layer.items, selectors.layer.allIds],
     (drawing, items, allIds) => {
@@ -52,6 +53,7 @@ export default function MapBody({ mapId }: MapBodyProps) {
     usePointerHover(mapId)
     useFeatureSelect(map)
     useFeatureProperties(map, 50)
+    useTileBoundaries(map)
 
     const drawing = useAppSelector(selectors.draw.isDrawing)
     const showAttribution = useAppSelector(selectShowAttribution)

src/components/Spotlight/index.tsx

@@ -141,6 +141,13 @@ export const Spotlight: React.FC<SpotlightProps> = ({ children, mapId }) => {
                     },
                     icon: <IconZoomReset size={18} />,
                 },
+                {
+                    title: "Toggle Show Tile Boundaries",
+                    description: "Toggle visibility of tile boundaries",
+                    onTrigger: async () => {
+                        dispatch(actions.tileBoundaries.toggle())
+                    },
+                },
             ]}
             searchIcon={<IconSearch size={18} />}
             searchPlaceholder="Search..."

src/sphere-hooks/useTileBoundaries.ts

@@ -0,0 +1,22 @@
+import { MapRef } from "react-map-gl/maplibre"
+import { useEffect } from "react"
+import { useAppSelector } from "@/store/hooks"
+import { selectors } from "@/store"
+
+export default function useTileBoundaries(ref: MapRef | undefined) {
+    const val = useAppSelector(selectors.tileBoundaries.show)
+
+    useEffect(() => {
+        const map = ref?.getMap()
+        if (!map) {
+            return
+        }
+        const origin = map.showTileBoundaries
+        map.showTileBoundaries = val
+        return () => {
+            map.showTileBoundaries = origin
+        }
+    }, [ref, val])
+
+    return null
+}

src/store/actions.ts

@@ -1,4 +1,5 @@
 import { projectionSlice } from "./projection"
+import { tileBoundariesSlice } from "./tile-boundaries"
 import { mapStyleSlice } from "./mapStyle"
 import { skySlice } from "./sky"
 import { terrainSlice } from "./terrain"
@@ -19,6 +20,7 @@ export const actions = {
     draw: drawActions,
     error: errorActions,
     projection: projectionSlice.actions,
+    tileBoundaries: tileBoundariesSlice.actions,
     mapStyle: mapStyleSlice.actions,
     sky: skySlice.actions,
     terrain: terrainSlice.actions,

src/store/index.ts

@@ -1,5 +1,6 @@
 import { configureStore } from "@reduxjs/toolkit"
 import projection from "./projection"
+import tileBoundaries from "./tile-boundaries"
 import mapStyle from "./mapStyle"
 import sky from "./sky"
 import terrain from "./terrain"
@@ -21,6 +22,7 @@ export const store = configureStore({
         draw,
         error,
         projection,
+        tileBoundaries,
         mapStyle,
         sky,
         terrain,

src/store/selectors.ts

@@ -6,6 +6,7 @@
 import { appSlice as app } from "./app"
 import { sourceSlice as source } from "./source"
 import { createSelector } from "@reduxjs/toolkit"
+import { tileBoundariesSlice } from "./tile-boundaries"
 // Other code such as selectors can use the imported `RootState` type
 const selectProjection = (state: RootState) => {
     const drawing = draw.selectors.isDrawing(state)
@@ -28,6 +29,10 @@
     return state.mapStyle.value
 }
 
+const showTileBoundaries = (state: RootState) => {
+    return state.tileBoundaries.value
+}
+
 const visibleIds = createSelector([layer.selectors.items, layer.selectors.allIds],
     (items, allIds) => allIds.filter(id => items[id].visible),
 )
@@ -48,4 +53,7 @@
         visibleIds,
     },
     selection: selection.selectors,
+    tileBoundaries: {
+        show: showTileBoundaries,
+    },
 }

src/store/tile-boundaries.ts

@@ -0,0 +1,27 @@
+import { createSlice } from "@reduxjs/toolkit"
+
+type TileBoundariesState = {
+    value: boolean
+}
+
+const initialState: TileBoundariesState = {
+    value: false,
+}
+
+export const tileBoundariesSlice = createSlice({
+    name: "tileBoundaries",
+    initialState,
+    reducers: {
+        enable: state => {
+            state.value = true
+        },
+        disable: state => {
+            state.value = false
+        },
+        toggle: state => {
+            state.value = !state.value
+        },
+    },
+})
+
+export default tileBoundariesSlice.reducer