Panden selection: dynamic zoom

Adjust map zoom to area size.
Zenmo · Dec 17, 2024 · 2c3b0bb · 2c3b0bb
1 parent 3b097dd
commit 2c3b0bb
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/frontend/src/panden-select/panden-select.tsx b/frontend/src/panden-select/panden-select.tsx
@@ -3,7 +3,7 @@ import {BuurtFeatureCollection, getBuurtCenter} from "../services/wijkenbuurten/
 import {Bag2DPand} from "../services/bag2d"
 import {GeoJSON, MapContainer, TileLayer} from "react-leaflet"
 import {featureCollection} from "@turf/helpers"
-import {geoJsonPositionToLeaflet} from "../services/geometry"
+import {geoJsonPositionToLeaflet, geometryToBoundingBox} from "../services/geometry"
 import center from "@turf/center"
 import {LeafletMouseEventHandlerFn} from "leaflet"
 import {PandID} from "zero-zummon"
@@ -52,7 +52,7 @@ export const PandenSelect: FunctionComponent<{
     return (
         <MapContainer
             center={buurtCenter}
-            zoom={15}
+            bounds={geometryToBoundingBox(buurten)}
             scrollWheelZoom={true}
             style={{
                 minHeight: "30rem",
@@ -77,4 +77,4 @@ export const PandenSelect: FunctionComponent<{
                 eventHandlers={{click: removePand}} />
         </MapContainer>
     )
-}
+}