Zoom automatique sur la zone concernée

nupes-elections-front/src/Elections2024.js

@@ -126,7 +126,7 @@ function ParticipationTable({resultats}) {
   </>
 }
 
-function ZoneGeoJSON({resultatsZone, typeZone, listes, blocs, nuances, grouperParBloc = false}) {
+function ZoneGeoJSON({typeResultats, resultatsZone, typeZone, listes, blocs, nuances, grouperParBloc = false}) {
   const [idZone, nomZone] = useMemo(() => {
     if (!resultatsZone[typeZone])
       return ["", ""]
@@ -180,8 +180,21 @@ function ZoneGeoJSON({resultatsZone, typeZone, listes, blocs, nuances, grouperPa
     }
   }
 
+  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>
@@ -196,8 +209,6 @@ function ZoneGeoJSON({resultatsZone, typeZone, listes, blocs, nuances, grouperPa
 function ContenuCarte({typeResultats, resultats, typeZone, listes, blocs, nuances, grouperParBloc = false}) {
   const map = useMap()
 
-  console.log(typeZone)
-
   const [resultatsZones, setResultatsZones] = useState([])
 
   const zones = useMemo(() => {
@@ -213,8 +224,12 @@ function ContenuCarte({typeResultats, resultats, typeZone, listes, blocs, nuance
       return data?.circonscriptions ?? []
     else if (typeZone === "commune")
       return data?.communes ?? []
-    else if (typeZone === "bureau_vote")
+    else if (typeZone === "bureau_vote") {
+      if (typeResultats === "bureau_vote")
+        return data ? [data.id] : []
+      else
         return data?.bureaux_vote ?? []
+    }
     else
       return []
   }, [typeResultats, resultats, typeZone])
@@ -243,13 +258,13 @@ function ContenuCarte({typeResultats, resultats, typeZone, listes, blocs, nuance
   return <>
     {resultatsZones.filter(resultatsZone => resultatsZone.geometry['type']).map(resultatsZone =>
       <ZoneGeoJSON key={getZoneIdentifier(resultatsZone[typeZone])}
-                   resultatsZone={resultatsZone} typeZone={typeZone} listes={listes} blocs={blocs} nuances={nuances}
+                   typeResultats={typeResultats} resultatsZone={resultatsZone} typeZone={typeZone} listes={listes}
-                   grouperParBloc={grouperParBloc}/>)}
+                   blocs={blocs} nuances={nuances} grouperParBloc={grouperParBloc}/>)}
   </>
 }
 
 function Carte({typeResultats, resultats, typeZone, listes, blocs, nuances, grouperParBloc = false}) {
-  const center = [46.603354, 1.888334]
+  const center = typeResultats === "france" ? [46.603354, 1.888334] : [0, 0]
 
   return <>
     <MapContainer center={center} zoom={6} style={{height: "90vh"}}>
@@ -286,7 +301,7 @@ function SelectionAffichage({typeResultats, typeZone, setTypeZone}) {
       items.push(<MenuItem value="commune">Communes</MenuItem>)
     }
 
-    if (typeResultats === "circonscription" || typeResultats === "commune") {
+    if (typeResultats === "circonscription" || typeResultats === "commune" || typeResultats === "bureau_vote") {
       setTypeZone("bureau_vote")
       items.push(<MenuItem value="bureau_vote">Bureau de vote</MenuItem>)
     }