Add map feature extraction workflow

frontend/src/components/GeoMap.tsx

@@ -5,6 +5,7 @@ import 'maplibre-gl/dist/maplibre-gl.css'
 interface GeoMapProps {
   data: GeoJSON.FeatureCollection | null
   areaData?: GeoJSON.FeatureCollection | null
+  selectedFeature?: GeoJSON.Feature | null
   visible?: boolean
   opacity?: number
   areaVisible?: boolean
@@ -12,6 +13,11 @@ interface GeoMapProps {
   onFeatureSelect?: (feature: GeoJSON.Feature | null) => void
 }
 
+const EMPTY_FEATURE_COLLECTION: GeoJSON.FeatureCollection = {
+  type: 'FeatureCollection',
+  features: [],
+}
+
 function collectCoordinates(featureCollection: GeoJSON.FeatureCollection): maplibregl.LngLatBoundsLike | null {
   const coordinates: [number, number][] = []
   const walk = (coords: unknown) => {
@@ -54,6 +60,7 @@ function mergeFeatureCollections(collections: Array<GeoJSON.FeatureCollection |
 function GeoMap({
   data,
   areaData = null,
+  selectedFeature = null,
   visible = true,
   opacity = 0.4,
   areaVisible = true,
@@ -270,6 +277,56 @@ function GeoMap({
     }
   }, [areaVisible, areaOpacity, areaData, mapStyleReady])
 
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map || !mapStyleReady || !map.isStyleLoaded()) {
+      return
+    }
+
+    const selectedCollection: GeoJSON.FeatureCollection = selectedFeature
+      ? { type: 'FeatureCollection', features: [selectedFeature] }
+      : EMPTY_FEATURE_COLLECTION
+
+    if (map.getSource('selected-feature')) {
+      ;(map.getSource('selected-feature') as maplibregl.GeoJSONSource).setData(selectedCollection)
+      return
+    }
+
+    map.addSource('selected-feature', { type: 'geojson', data: selectedCollection })
+    map.addLayer({
+      id: 'selected-feature-fill',
+      type: 'fill',
+      source: 'selected-feature',
+      filter: ['match', ['geometry-type'], ['Polygon', 'MultiPolygon'], true, false],
+      paint: {
+        'fill-color': '#fde047',
+        'fill-opacity': 0.32,
+      },
+    })
+    map.addLayer({
+      id: 'selected-feature-line',
+      type: 'line',
+      source: 'selected-feature',
+      filter: ['match', ['geometry-type'], ['Polygon', 'MultiPolygon', 'LineString', 'MultiLineString'], true, false],
+      paint: {
+        'line-color': '#854d0e',
+        'line-width': 4,
+      },
+    })
+    map.addLayer({
+      id: 'selected-feature-circle',
+      type: 'circle',
+      source: 'selected-feature',
+      filter: ['match', ['geometry-type'], ['Point', 'MultiPoint'], true, false],
+      paint: {
+        'circle-color': '#fde047',
+        'circle-radius': 7,
+        'circle-stroke-color': '#854d0e',
+        'circle-stroke-width': 2,
+      },
+    })
+  }, [selectedFeature, mapStyleReady])
+
   return <div className="map-container" ref={containerRef} />
 }