From 9d15c8070774705a6be3289f4620f5358686658c Mon Sep 17 00:00:00 2001 From: Nikolay Martyanov Date: Tue, 2 Jan 2024 01:21:52 +0100 Subject: [PATCH] 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 --- frontend/src/components/RegionMap.jsx | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/RegionMap.jsx b/frontend/src/components/RegionMap.jsx index 1839937..2be4801 100644 --- a/frontend/src/components/RegionMap.jsx +++ b/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) {