owenrees/echecsfrance
1
0
Fork 0
mirror of https://github.com/TheRealOwenRees/echecsfrance.git synced 2026-07-23 12:36:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

center on France and stay within bounds on initial load

Browse Source
This commit is contained in:
Owen Rees
2023-07-18 21:25:29 +02:00
parent b305b0578b
commit fc0fa4d0c4
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[lang]/tournois/TournamentMap.tsx
+9 -2
View File
@@ -51,14 +51,21 @@ declare class BouncingMarker extends Marker {
const MapEvents = () => { const MapEvents = () => {
const setMapBounds = useSetAtom(mapBoundsAtom); 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", () => { const map = useMapEvent("moveend", () => {
// Set the map bounds atoms when the user pans/zooms // Set the map bounds atoms when the user pans/zooms
setMapBounds(map.getBounds()); 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(() => { useEffect(() => {
const worldBounds = L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180)); map.setView(franceBounds.getCenter(), map.getBoundsZoom(franceBounds));
map.setMaxBounds(worldBounds); map.setMaxBounds(worldBounds);
map.options.maxBoundsViscosity = 1.0; // Prevents going past bounds while dragging map.options.maxBoundsViscosity = 1.0; // Prevents going past bounds while dragging
}, [map]); }, [map]);