Zoom automatique sur la zone concernée

This commit is contained in:
Emmy D'Anello 2024-06-16 23:36:45 +02:00
parent 7611d33072
commit efb5344475
Signed by: ynerant
GPG Key ID: 3A75C55819C8CF85

View File

@ -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")
return data?.bureaux_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}
grouperParBloc={grouperParBloc}/>)}
typeResultats={typeResultats} resultatsZone={resultatsZone} typeZone={typeZone} listes={listes}
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>)
}