feat: map the complete municipality of Mol

frontend/src/components/map/MapWorkspace.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import GeoMap from '../GeoMap'
 import type { AreaRead, DatasetCreateResponse, QaComparisonResult, VectorSelectionBBox, VectorSelectionResponse } from '../../types'
+import { featureCollectionBounds } from '../../lib/geojsonBounds'
 
 const DEFAULT_SELECTED_FEATURE_FILENAME = 'selected-feature.geojson'
 const DEFAULT_AREA_SELECTION_FILENAME = 'area-selection.geojson'
@@ -55,17 +56,15 @@ function getFeatureGeometrySummary(feature: GeoJSON.Feature | null) {
 }
 
 function getFeatureCollectionBBox(collection: GeoJSON.FeatureCollection | null): VectorSelectionBBox | null {
-  const points = collection?.features.flatMap((feature) => collectGeometryPoints(feature.geometry)) ?? []
-  if (points.length === 0) {
+  const bounds = featureCollectionBounds(collection)
+  if (!bounds) {
     return null
   }
-  const xs = points.map((point) => point[0])
-  const ys = points.map((point) => point[1])
   return {
-    min_x: Math.min(...xs),
-    min_y: Math.min(...ys),
-    max_x: Math.max(...xs),
-    max_y: Math.max(...ys),
+    min_x: bounds.minX,
+    min_y: bounds.minY,
+    max_x: bounds.maxX,
+    max_y: bounds.maxY,
     crs: 'EPSG:4326',
   }
 }
@@ -303,9 +302,9 @@ export function MapWorkspace({
   const featureExtractionEntries = featureProperties ? Object.entries(featureProperties).slice(0, 48) : []
   const featureGeometrySummary = getFeatureGeometrySummary(selectedMapFeature)
   const selectedFeatureGeoJson = selectedMapFeature ? selectedFeatureCollection(selectedMapFeature) : null
-  const selectedFeatureBbox = getFeatureBBox(selectedMapFeature)
-  const activeLayerBbox = getFeatureCollectionBBox(mapFeatureCollection)
-  const selectedAreaBbox = getFeatureCollectionBBox(areaFeatureCollection)
+  const selectedFeatureBbox = useMemo(() => getFeatureBBox(selectedMapFeature), [selectedMapFeature])
+  const activeLayerBbox = useMemo(() => getFeatureCollectionBBox(mapFeatureCollection), [mapFeatureCollection])
+  const selectedAreaBbox = useMemo(() => getFeatureCollectionBBox(areaFeatureCollection), [areaFeatureCollection])
   const currentSelectionBbox = parseBboxInput(bboxInput)
   const areaSelectionFeatures = mapSelectionResult?.geojson.features ?? []
   const areaSelectionPreviewFeatures = areaSelectionFeatures.slice(0, 12)