Improve leaflet type handing

leaflet.d.ts

@@ -1,7 +1,10 @@
 import * as L from "leaflet";
 
-// For some reason, @types/leaflet.markercluster isn't being recognized
-// I'm including it here by hand
+declare module "leaflet.smooth_marker_bouncing";
+
+// For some reason, @types/leaflet.markercluster isn't being recognized when added as a package
+
+// I'm including it here by hand, and also including types for BouncingMarker and leaflet-gesture-handling
 declare module "leaflet" {
   class MarkerCluster extends Marker {
     /*
@@ -329,4 +332,36 @@ declare module "leaflet" {
   function markerClusterGroup(
     options?: MarkerClusterGroupOptions,
   ): MarkerClusterGroup;
+
+  // These have been added by hand and aren't part of the  @types/leaflet.markercluster that the above is a copy of
+
+  interface Map {
+    gestureHandling?: {
+      enable(): void;
+      disable(): void;
+    };
+  }
+
+  interface MapOptions {
+    gestureHandlingOptions?: {
+      duration?: number;
+      text?: {
+        touch: string;
+        scroll: string;
+        scrollMac: string;
+      };
+    };
+  }
+
+  // Declare a class type that adds in methods etc. defined by leaflet.smooth_marker_bouncing
+  declare class BouncingMarker extends Marker {
+    isBouncing(): boolean;
+    bounce(): void;
+    stopBouncing(): void;
+
+    _icon: HTMLElement;
+    _bouncingMotion?: {
+      bouncingAnimationPlaying: boolean;
+    };
+  }
 }

package.json

@@ -29,8 +29,8 @@
     "jotai": "^2.6.1",
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
-    "leaflet-gesture-handling": "^1.2.2",
     "leaflet-draw": "^1.0.4",
+    "leaflet-gesture-handling": "^1.2.2",
     "leaflet.markercluster": "^1.5.3",
     "leaflet.smooth_marker_bouncing": "3.0.3",
     "lodash": "^4.17.21",
@@ -67,7 +67,6 @@
     "@tailwindcss/typography": "^0.5.15",
     "@testing-library/jest-dom": "^6.1.2",
     "@types/leaflet": "^1.9.12",
-    "@types/leaflet.markercluster": "^1.5.4",
     "@types/lodash": "^4.14.195",
     "@types/nodemailer": "^6.4.8",
     "@types/react": "^18.2.27",

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;
 };

yarn.lock

@@ -1947,20 +1947,6 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
-"@types/leaflet.markercluster@^1.5.4":
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.4.tgz#2ab43417cf3f6a42d0f1baf4e1c8f659cf1dc3a1"
-  integrity sha512-tfMP8J62+wfsVLDLGh5Zh1JZxijCaBmVsMAX78MkLPwvPitmZZtSin5aWOVRhZrCS+pEOZwNzexbfWXlY+7yjg==
-  dependencies:
-    "@types/leaflet" "*"
-
-"@types/leaflet@*":
-  version "1.9.9"
-  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.9.tgz#5e469f1443c6796b59ad8300495bd82797345356"
-  integrity sha512-o0qD9ReJzWpGNIAY0O32NkpfM6rhV4sxnwVkz7x7Ah4Zy9sP+2T9Q3byccL5la1ZX416k+qiyvt8ksBavPPY7A==
-  dependencies:
-    "@types/geojson" "*"
-
 "@types/leaflet@^1.9.12":
   version "1.9.12"
   resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.12.tgz#a6626a0b3fba36fd34723d6e95b22e8024781ad6"