From fc0fa4d0c43f305f1df453aaf6953acd46b55d6c Mon Sep 17 00:00:00 2001
From: Owen Rees <owenrees82@gmail.com>
Date: Tue, 18 Jul 2023 21:25:29 +0200
Subject: [PATCH] center on France and stay within bounds on initial load

---
 app/[lang]/tournois/TournamentMap.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

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]);