Fix add widget behavior, widget types and view settings button menu item...

client/src/utils/map-utils/functions/mapHelpers.js

@@ -0,0 +1,57 @@
+import {useMap, useMapEvents} from "react-leaflet";
+import {useEffect} from "react";
+
+/**
+ * Helper component for console logging where on a map the user clicked for debugging purposes.
+ *
+ * This component renders nothing and is intended to be mounted inside a <MapContainer>
+ */
+export function MapClickLogger() {
+
+    const map = useMap();
+    useMapEvents({
+        click(e) {
+            console.log("lat:", e.latlng.lat, "lng:", e.latlng.lng);
+        },
+    });
+
+    return null;
+}
+
+/**
+ * Helper component that detects when a zoom change as completed and sets the callback to the updated zoom level
+ *
+ * This component renders nothing and is intended to be mounted inside a <MapContainer>
+ *
+ * @param onZoom Callback set to the current zoom level on zoomend
+ */
+export function ZoomWatcher({onZoom}){
+    const map = useMap();
+    useMapEvents({
+        zoomend(e){
+            onZoom(map.getZoom());
+
+        }
+    })
+    return null;
+}
+
+/**
+ * Helper component that take triggers a flyTo animation when a position is present
+ *
+ * This component returns nothing and is intended to be mounted inside a <MapConatiner>
+ *
+ * @param position Array of two integers representing the desired coordinates to flyTo
+ * @param zoom Integer representing the desired zoom level to display
+
+ */
+export function FlyTo({ position, zoom }) {
+    const map = useMap();
+
+    useEffect(() => {
+        if (!position) return;
+        map.flyTo(position, zoom, { animate: true });
+    }, [position, zoom, map]);
+
+    return null;
+}