Add V1 map workbench controls

frontend/src/components/GeoMap.tsx

@@ -4,6 +4,9 @@ import 'maplibre-gl/dist/maplibre-gl.css'
 
 interface GeoMapProps {
   data: GeoJSON.FeatureCollection | null
+  visible?: boolean
+  opacity?: number
+  onFeatureSelect?: (feature: GeoJSON.Feature | null) => void
 }
 
 function collectCoordinates(featureCollection: GeoJSON.FeatureCollection): maplibregl.LngLatBoundsLike | null {
@@ -40,9 +43,14 @@ function collectCoordinates(featureCollection: GeoJSON.FeatureCollection): mapli
   ]
 }
 
-function GeoMap({ data }: GeoMapProps): JSX.Element {
+function GeoMap({ data, visible = true, opacity = 0.4, onFeatureSelect }: GeoMapProps): JSX.Element {
   const containerRef = useRef<HTMLDivElement | null>(null)
   const mapRef = useRef<maplibregl.Map | null>(null)
+  const onFeatureSelectRef = useRef<GeoMapProps['onFeatureSelect']>(onFeatureSelect)
+
+  useEffect(() => {
+    onFeatureSelectRef.current = onFeatureSelect
+  }, [onFeatureSelect])
 
   useEffect(() => {
     if (!containerRef.current || mapRef.current) {
@@ -56,6 +64,21 @@ function GeoMap({ data }: GeoMapProps): JSX.Element {
       zoom: 9,
     })
     map.addControl(new maplibregl.NavigationControl(), 'top-right')
+    map.on('click', (event) => {
+      if (!map.getLayer('dataset-fill') || !map.getLayer('dataset-line')) {
+        onFeatureSelectRef.current?.(null)
+        return
+      }
+      const features = map.queryRenderedFeatures(event.point, {
+        layers: ['dataset-fill', 'dataset-line'],
+      })
+      if (features.length === 0) {
+        onFeatureSelectRef.current?.(null)
+        return
+      }
+      const feature = features[0] as unknown as GeoJSON.Feature
+      onFeatureSelectRef.current?.(feature)
+    })
     mapRef.current = map
 
     return () => {
@@ -136,6 +159,22 @@ function GeoMap({ data }: GeoMapProps): JSX.Element {
     }
   }, [data])
 
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map) {
+      return
+    }
+    const visibility = visible ? 'visible' : 'none'
+    if (map.getLayer('dataset-fill')) {
+      map.setLayoutProperty('dataset-fill', 'visibility', visibility)
+      map.setPaintProperty('dataset-fill', 'fill-opacity', opacity)
+    }
+    if (map.getLayer('dataset-line')) {
+      map.setLayoutProperty('dataset-line', 'visibility', visibility)
+      map.setPaintProperty('dataset-line', 'line-opacity', visible ? 1 : 0)
+    }
+  }, [visible, opacity, data])
+
   return <div className="map-container" ref={containerRef} />
 }