feat: map the complete municipality of Mol

frontend/src/components/GeoMap.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import maplibregl from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import { PRIMARY_FOCUS_CENTER } from '../config/primaryFocus'
+import { featureCollectionBounds } from '../lib/geojsonBounds'
 
 interface GeoMapProps {
   data: GeoJSON.FeatureCollection | null
@@ -49,36 +50,13 @@ function defaultMapStyle(): string | maplibregl.StyleSpecification {
 }
 
 function collectCoordinates(featureCollection: GeoJSON.FeatureCollection): maplibregl.LngLatBoundsLike | null {
-  const coordinates: [number, number][] = []
-  const walk = (coords: unknown) => {
-    if (!Array.isArray(coords)) {
-      return
-    }
-    if (coords.length === 2 && typeof coords[0] === 'number' && typeof coords[1] === 'number') {
-      coordinates.push([coords[0], coords[1]])
-      return
-    }
-    for (const item of coords) {
-      walk(item)
-    }
-  }
-
-  for (const feature of featureCollection.features) {
-    const geometry = feature.geometry as any
-    if (geometry && geometry.coordinates) {
-      walk(geometry.coordinates)
-    }
-  }
-
-  if (coordinates.length === 0) {
+  const bounds = featureCollectionBounds(featureCollection)
+  if (!bounds) {
     return null
   }
-
-  const xs = coordinates.map((point) => point[0])
-  const ys = coordinates.map((point) => point[1])
   return [
-    [Math.min(...xs), Math.min(...ys)],
-    [Math.max(...xs), Math.max(...ys)],
+    [bounds.minX, bounds.minY],
+    [bounds.maxX, bounds.maxY],
   ]
 }
 
@@ -244,15 +222,22 @@ function GeoMap({
         source: 'dataset',
         paint: {
           'fill-color': [
-            'match',
-            ['get', 'change_type'],
-            'added',
-            '#16a34a',
-            'removed',
-            '#dc2626',
-            'unchanged',
-            '#2563eb',
-            '#f97316',
+            'case',
+            ['==', ['get', 'layer_type'], 'municipality_boundary'],
+            '#0f766e',
+            ['==', ['get', 'layer_type'], 'building'],
+            '#0891b2',
+            [
+              'match',
+              ['get', 'change_type'],
+              'added',
+              '#16a34a',
+              'removed',
+              '#dc2626',
+              'unchanged',
+              '#2563eb',
+              '#f97316',
+            ],
           ],
           'fill-opacity': 0.4,
         },
@@ -263,17 +248,24 @@ function GeoMap({
         source: 'dataset',
         paint: {
           'line-color': [
-            'match',
-            ['get', 'change_type'],
-            'added',
-            '#15803d',
-            'removed',
-            '#b91c1c',
-            'unchanged',
-            '#1d4ed8',
-            '#ea580c',
+            'case',
+            ['==', ['get', 'layer_type'], 'municipality_boundary'],
+            '#0f5f59',
+            ['==', ['get', 'layer_type'], 'building'],
+            '#0e7490',
+            [
+              'match',
+              ['get', 'change_type'],
+              'added',
+              '#15803d',
+              'removed',
+              '#b91c1c',
+              'unchanged',
+              '#1d4ed8',
+              '#ea580c',
+            ],
           ],
-          'line-width': 2,
+          'line-width': ['interpolate', ['linear'], ['zoom'], 8, 0.25, 12, 0.8, 16, 2],
         },
       })
     }