Improve leaflet type handing

src/components/Map.tsx

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef } from "react";
 import React from "react";
 
 import { useAtomValue, useSetAtom } from "jotai";
-import L, { DomUtil, LatLngLiteral, Marker } from "leaflet";
+import L, { BouncingMarker, DomUtil, LatLngLiteral, Marker } from "leaflet";
 import "leaflet-defaulticon-compatibility";
 import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
 import "leaflet.smooth_marker_bouncing";
@@ -21,19 +21,6 @@ export type MarkerRef = {
   bounce: () => void;
 };
 
-// Declare a class type that adds in methods etc. defined by leaflet.smooth_marker_bouncing
-// to keep Typescript happy
-declare class BouncingMarker extends Marker {
-  isBouncing(): boolean;
-  bounce(): void;
-  stopBouncing(): void;
-
-  _icon: HTMLElement;
-  _bouncingMotion?: {
-    bouncingAnimationPlaying: boolean;
-  };
-}
-
 const stopBouncingMarkers = () => {
   const markers =
     // @ts-ignore

src/components/MapEvents.tsx

@@ -52,27 +52,26 @@ export const MapEvents = ({
 
     map.addHandler("gestureHandling", GestureHandling);
 
-    // @ts-expect-error Typescript does not see additional handler here
-    map.gestureHandling.enable();
-  }, [map]);
+    map.gestureHandling?.enable();
+  }, [bounds, map]);
 
   useEffect(() => {
-    console.log("setting map language", locale);
-    // @ts-expect-error Typescript does not see additional handler here
-    map.options.gestureHandlingOptions.text = {
-      touch: t("touch"),
-      scroll: t("scroll"),
-      scrollMac: t("scrollMac"),
-    };
+    if (
+      "gestureHandlingOptions" in map.options &&
+      map.options.gestureHandlingOptions
+    ) {
+      map.options.gestureHandlingOptions.text = {
+        touch: t("touch"),
+        scroll: t("scroll"),
+        scrollMac: t("scrollMac"),
+      };
+    }
 
     // We need to toggle the handler to update the text on prod.  No idea why.
 
-    // @ts-expect-error Typescript does not see additional handler here
-    map.gestureHandling.disable();
-
-    // @ts-expect-error Typescript does not see additional handler here
-    map.gestureHandling.enable();
-  }, [map, locale]);
+    map.gestureHandling?.disable();
+    map.gestureHandling?.enable();
+  }, [map, locale, t]);
 
   return null;
 };