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

Merge pull request #106 from TheRealOwenRees/feature/zoom

Browse Source 
center on France and stay within bounds on initial load
This commit is contained in:
Owen Rees
2023-07-18 21:49:37 +02:00
committed by GitHub
parent b305b0578b fc0fa4d0c4
commit 8c38ed7991
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 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]);