Meilleur zoom sur une région

nupes-elections-front/package-lock.json

@@ -15,6 +15,7 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "geojson-bbox": "^0.0.1",
         "highcharts": "^11.4.3",
         "highcharts-react-official": "^3.2.1",
         "leaflet": "^1.9.4",
@@ -10104,6 +10105,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/geojson-bbox": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/geojson-bbox/-/geojson-bbox-0.0.1.tgz",
+      "integrity": "sha512-1ZuQ6SmG8X2c5a4rpiGHbjZuZOhz+Y1uCDyN1Az7552/jBziCIaJe4V1d07I6Ul9k8V8yGi6kisDlvpIjJrZ+Q==",
+      "license": "MIT"
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",

nupes-elections-front/package.json

@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "geojson-bbox": "^0.0.1",
     "highcharts": "^11.4.3",
     "highcharts-react-official": "^3.2.1",
     "leaflet": "^1.9.4",

nupes-elections-front/src/Elections2024.js

@@ -1,4 +1,5 @@
 import {useParams} from "react-router-dom"
+import {MenuItem, Select} from "@mui/material"
 import FormGroup from '@mui/material/FormGroup'
 import FormControlLabel from '@mui/material/FormControlLabel'
 import Table from '@mui/material/Table'
@@ -15,8 +16,8 @@ import HighchartsReact from 'highcharts-react-official'
 import {useEffect, useMemo, useState} from "react"
 import {GeoJSON, MapContainer, Popup, TileLayer, useMap} from "react-leaflet"
 
+import bbox from 'geojson-bbox'
 import 'leaflet/dist/leaflet.css'
-import {MenuItem, Select} from "@mui/material";
 
 highchartsItem(Highcharts)
 
@@ -180,21 +181,8 @@ function ZoneGeoJSON({typeResultats, resultatsZone, typeZone, listes, blocs, nua
     }
   }
 
-  const map = useMap()
-  function onEachFeature(feature, layer) {
-    if (typeResultats !== "france") {
-      const mapCenter = map.getCenter()
-      const bounds = layer.getBounds()
-      if (mapCenter.lat === 0 && mapCenter.lng === 0)
-        map.fitBounds(bounds)
-      else
-        map.fitBounds(map.getBounds().extend(bounds))
-    }
-  }
-
   return <GeoJSON
     data={{'type': "Feature", 'geometry': resultatsZone.geometry}}
-    onEachFeature={onEachFeature}
     style={{fillColor: couleur, fillOpacity: 0.5, color: 'white', weight: 1}}>
     <Popup>
       <strong><a href={`/elections/europeennes/2024/${typeZone}/${idZone}/`}>{nomZone}</a></strong>
@@ -208,7 +196,6 @@ function ZoneGeoJSON({typeResultats, resultatsZone, typeZone, listes, blocs, nua
 
 function ContenuCarte({typeResultats, resultats, typeZone, listes, blocs, nuances, grouperParBloc = false}) {
   const map = useMap()
-
   const [resultatsZones, setResultatsZones] = useState([])
 
   const zones = useMemo(() => {
@@ -234,6 +221,18 @@ function ContenuCarte({typeResultats, resultats, typeZone, listes, blocs, nuance
       return []
   }, [typeResultats, resultats, typeZone])
 
+  useEffect(() => {
+    if (typeResultats === "france")
+      return
+
+    const geometry = resultats.geometry
+    if (geometry) {
+      // On centre la carte sur la zone
+      const geometry_bbox = bbox(geometry)
+      map.fitBounds([[geometry_bbox[1], geometry_bbox[0]], [geometry_bbox[3], geometry_bbox[2]]])
+    }
+  }, [typeResultats, resultats, map])
+
   useEffect(() => {
     if (!zones)
       return
@@ -408,7 +407,7 @@ export default function Election2024() {
     }
     setCategoriesVoix(categories)
     setDataVoix(data)
-  }, [voixParBloc, voixParNuance, grouperParBloc])
+  }, [voixParBloc, voixParNuance, blocs, nuances, grouperParBloc])
 
   useEffect(() => {
     if (!resultats['voix_listes'])