ynerant
/
nupes-elections
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
1 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
nupes-elections-front/src/Elections2024.js
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(() => { const [idZone, nomZone] = useMemo(() => {
if (!resultatsZone[typeZone]) if (!resultatsZone[typeZone])
return ["", ""] 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 return <GeoJSON
data={{'type': "Feature", 'geometry': resultatsZone.geometry}} data={{'type': "Feature", 'geometry': resultatsZone.geometry}}
onEachFeature={onEachFeature}
style={{fillColor: couleur, fillOpacity: 0.5, color: 'white', weight: 1}}> style={{fillColor: couleur, fillOpacity: 0.5, color: 'white', weight: 1}}>
<Popup> <Popup>
<strong><a href={`/elections/europeennes/2024/${typeZone}/${idZone}/`}>{nomZone}</a></strong> <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}) { function ContenuCarte({typeResultats, resultats, typeZone, listes, blocs, nuances, grouperParBloc = false}) {
const map = useMap() const map = useMap()
console.log(typeZone)
const [resultatsZones, setResultatsZones] = useState([]) const [resultatsZones, setResultatsZones] = useState([])
const zones = useMemo(() => { const zones = useMemo(() => {
@ -213,8 +224,12 @@ function ContenuCarte({typeResultats, resultats, typeZone, listes, blocs, nuance
return data?.circonscriptions ?? [] return data?.circonscriptions ?? []
else if (typeZone === "commune") else if (typeZone === "commune")
return data?.communes ?? [] 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 ?? [] return data?.bureaux_vote ?? []
}
else else
return [] return []
}, [typeResultats, resultats, typeZone]) }, [typeResultats, resultats, typeZone])
@ -243,13 +258,13 @@ function ContenuCarte({typeResultats, resultats, typeZone, listes, blocs, nuance
return <> return <>
{resultatsZones.filter(resultatsZone => resultatsZone.geometry['type']).map(resultatsZone => {resultatsZones.filter(resultatsZone => resultatsZone.geometry['type']).map(resultatsZone =>
<ZoneGeoJSON key={getZoneIdentifier(resultatsZone[typeZone])} <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}) { 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 <> return <>
<MapContainer center={center} zoom={6} style={{height: "90vh"}}> <MapContainer center={center} zoom={6} style={{height: "90vh"}}>
@ -286,7 +301,7 @@ function SelectionAffichage({typeResultats, typeZone, setTypeZone}) {
items.push(<MenuItem value="commune">Communes</MenuItem>) items.push(<MenuItem value="commune">Communes</MenuItem>)
} }
if (typeResultats === "circonscription" || typeResultats === "commune") { if (typeResultats === "circonscription" || typeResultats === "commune" || typeResultats === "bureau_vote") {
setTypeZone("bureau_vote") setTypeZone("bureau_vote")
items.push(<MenuItem value="bureau_vote">Bureau de vote</MenuItem>) items.push(<MenuItem value="bureau_vote">Bureau de vote</MenuItem>)
} }