diff --git a/app/[lang]/tournois/TournamentMap.tsx b/app/[lang]/tournois/TournamentMap.tsx index 49bf268..7816a7a 100644 --- a/app/[lang]/tournois/TournamentMap.tsx +++ b/app/[lang]/tournois/TournamentMap.tsx @@ -51,14 +51,21 @@ declare class BouncingMarker extends Marker { const MapEvents = () => { const setMapBounds = useSetAtom(mapBoundsAtom); + + const worldBounds = L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180)); + const franceBounds = L.latLngBounds( + L.latLng(42.08, -5.12), + L.latLng(51.17, 9.53), + ); + const map = useMapEvent("moveend", () => { // Set the map bounds atoms when the user pans/zooms setMapBounds(map.getBounds()); }); - // Set the maximum bounds of the map to prevent moving past the world + // viewport agnostic centering of France & max world bounds useEffect(() => { - const worldBounds = L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180)); + map.setView(franceBounds.getCenter(), map.getBoundsZoom(franceBounds)); map.setMaxBounds(worldBounds); map.options.maxBoundsViscosity = 1.0; // Prevents going past bounds while dragging }, [map]);