diff --git a/nupes-elections-front/package-lock.json b/nupes-elections-front/package-lock.json index f1ea476..8a98879 100644 --- a/nupes-elections-front/package-lock.json +++ b/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", diff --git a/nupes-elections-front/package.json b/nupes-elections-front/package.json index 0879248..5293d60 100644 --- a/nupes-elections-front/package.json +++ b/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", diff --git a/nupes-elections-front/src/Elections2024.js b/nupes-elections-front/src/Elections2024.js index dcd92e6..fc6e351 100644 --- a/nupes-elections-front/src/Elections2024.js +++ b/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 {nomZone} @@ -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'])