Zone collection + creation

Zone create UI flow

src/components/Map.tsx

@@ -19,7 +19,7 @@ import { LayerGroup, MapContainer, TileLayer } from "react-leaflet";
 import MarkerClusterGroup from "react-leaflet-cluster";
 
 import { debouncedHoveredListIdAtom, mapBoundsAtom } from "@/atoms";
-import MapEvents from "@/components/MapEvents";
+import { MapEvents } from "@/components/MapEvents";
 
 export type MarkerRef = {
   getMarker: () => L.Marker<any>;
@@ -235,7 +235,7 @@ export const Map = ({
           }
         }}
       >
-        <MapEvents />
+        <MapEvents updateMapBoundsAtom />
         <TileLayer
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

src/components/MapEvents.tsx

@@ -13,18 +13,29 @@ import { mapBoundsAtom } from "@/atoms";
 // Add Leaflet.GestureHandling for improved desktop and mobile touch gestures
 L.Map.addInitHook("addHandler", "gestureHandling", GestureHandling);
 
-const MapEvents = () => {
+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),
+);
+
+type MapEventsProps = {
+  bounds?: L.LatLngBounds;
+  updateMapBoundsAtom?: boolean;
+};
+
+export const MapEvents = ({
+  bounds = franceBounds,
+  updateMapBoundsAtom = false,
+}: MapEventsProps) => {
   const locale = useLocale();
   const t = useTranslations("Map");
   const map = useMap();
   const setMapBounds = useSetAtom(mapBoundsAtom);
   const [isPending, startTransition] = useTransition();
 
-  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", () => {
+    if (!updateMapBoundsAtom) return;
 
   useMapEvent("moveend", () => {
     // Set the map bounds atoms when the user pans/zooms
@@ -35,7 +46,8 @@ const MapEvents = () => {
 
   // Viewport agnostic centering of France & max world bounds
   useEffect(() => {
-    map.setView(franceBounds.getCenter(), map.getBoundsZoom(franceBounds));
+    const zoom = map.getBoundsZoom(bounds);
+    map.setView(bounds.getCenter(), zoom === Infinity ? 10 : zoom);
     map.setMaxBounds(worldBounds);
     map.options.maxBoundsViscosity = 1.0; // Prevents going past bounds while dragging
 
@@ -65,5 +77,3 @@ const MapEvents = () => {
 
   return null;
 };
-
-export default MapEvents;

src/components/form/ZoneEditor.tsx

@@ -6,15 +6,10 @@ import "leaflet-defaulticon-compatibility";
 import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
 import "leaflet-draw/dist/leaflet.draw.css";
 import "leaflet/dist/leaflet.css";
-import {
-  FeatureGroup,
-  MapContainer,
-  TileLayer,
-  ZoomControl,
-} from "react-leaflet";
+import { FeatureGroup, MapContainer, TileLayer } from "react-leaflet";
 import { EditControl } from "react-leaflet-draw";
 
-import MapEvents from "../MapEvents";
+import { MapEvents } from "@/components/MapEvents";
 
 const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
 
@@ -73,7 +68,7 @@ export const ZoneEditor = ({ value, onChange }: ZoneEditorProps) => {
           onDeleted={handleChange}
           draw={{
             rectangle: false,
-            circle: true,
+            circle: false,
             polyline: false,
             polygon: true,
             marker: false,