front: Update map bounds calculation for selected region.

Refined the bounds calculation in RegionMap component to focus on the selected
region when one is chosen, otherwise, defaulting to the bounds of the entire
feature collection. This update enhances the user experience by zooming into
the selected region more effectively.

Signed-off-by: Nikolay Martyanov <ohmspectator@gmail.com>

frontend/src/components/RegionMap.jsx

@@ -124,7 +124,15 @@ function MapComponent() {
       type: 'FeatureCollection',
       features: updatedFeatures,
     };
-    const bounds = turf.bbox(featureCollection);
+    const seletctedRegionFeature = updatedFeatures.find(
+      (feature) => feature.properties.id === newSelectedRegionId,
+    );
+    let bounds;
+    if (seletctedRegionFeature) {
+      bounds = turf.bbox(seletctedRegionFeature);
+    } else {
+      bounds = turf.bbox(featureCollection);
+    }
     const mapBounds = new maplibregl.LngLatBounds([bounds[0], bounds[1]], [bounds[2], bounds[3]]);
 
     if (map.current.getSource('polygon')) {
@@ -176,7 +184,16 @@ function MapComponent() {
       type: 'FeatureCollection',
       features: validFeatures,
     };
-    const bounds = turf.bbox(featureCollection);
+
+    const seletctedRegionFeature = validFeatures.find(
+      (feature) => feature.properties.id === selectedRegion.id,
+    );
+    let bounds;
+    if (seletctedRegionFeature) {
+      bounds = turf.bbox(seletctedRegionFeature);
+    } else {
+      bounds = turf.bbox(featureCollection);
+    }
     const mapBounds = new maplibregl.LngLatBounds([bounds[0], bounds[1]], [bounds[2], bounds[3]]);
 
     if (map.current) {