Use MapEvents in a few places. It can't be applied everywhere we manage

map callbacks, because some are .ts files (without a clear lifetime) and
others are not in the component tree under the map.

package.json

@@ -55,7 +55,7 @@
     "read-excel-file": "^5.7.1",
     "route-snapper": "^0.3.0",
     "svelte": "^4.2.10",
-    "svelte-maplibre": "^0.8.2",
+    "svelte-maplibre": "^0.9.2",
     "uuid": "^9.0.1"
   }
 }

src/lib/common/LineMeasureController.svelte

@@ -6,9 +6,7 @@
   import { CollapsibleCard, SecondaryButton } from "govuk-svelte";
   import { emptyGeojson, layerId } from "lib/maplibre";
   import { LngLat, MapMouseEvent } from "maplibre-gl";
-  import { map } from "stores";
-  import { onDestroy, onMount } from "svelte";
-  import { GeoJSON, LineLayer } from "svelte-maplibre";
+  import { GeoJSON, LineLayer, MapEvents } from "svelte-maplibre";
 
   let isInactive = true;
   let waypoints: any[] = [];
@@ -18,21 +16,21 @@
 
   let drawGj = emptyGeojson();
 
-  function handleMapClickEvent(e: MapMouseEvent) {
+  function handleMapClickEvent(e: CustomEvent<MapMouseEvent>) {
     if (isInactive) {
       return;
     }
 
     if (!isShiftDown) {
       waypoints.push({
         id: nextId++,
-        lngLat: e.lngLat,
+        lngLat: e.detail.lngLat,
       });
       waypoints = waypoints;
       waypointsUpdated();
     }
     if (isShiftDown && waypoints.length > 0) {
-      findAndRemoveNeareastWaypoint(e.lngLat);
+      findAndRemoveNeareastWaypoint(e.detail.lngLat);
 
       waypointsUpdated();
     }
@@ -113,14 +111,6 @@
     lineToMeasure = undefined;
     drawGj = emptyGeojson();
   }
-
-  onMount(() => {
-    $map.on("click", handleMapClickEvent);
-  });
-
-  onDestroy(() => {
-    $map.off("click", handleMapClickEvent);
-  });
 </script>
 
 {#if isInactive}
@@ -165,6 +155,8 @@
 {/if}
 <svelte:window on:keydown={keyDown} on:keyup={keyUp} />
 
+<MapEvents on:click={handleMapClickEvent} />
+
 <GeoJSON data={drawGj}>
   <LineLayer
     {...layerId("measurement-line")}

src/lib/draw/route/SplitRouteMode.svelte

@@ -14,7 +14,7 @@
   import type { MapMouseEvent } from "maplibre-gl";
   import { map } from "stores";
   import { onDestroy, onMount } from "svelte";
-  import { CircleLayer, GeoJSON } from "svelte-maplibre";
+  import { CircleLayer, GeoJSON, MapEvents } from "svelte-maplibre";
   import type { Feature as OurFeature } from "types";
   import splitIcon from "../../../../assets/split_route.svg";
 
@@ -24,15 +24,9 @@
   onMount(() => {
     // Use a fallback icon in case the image fails
     $map.getCanvas().style.cursor = `url(${splitIcon}), crosshair`;
-
-    $map.on("mousemove", onMouseMove);
-    $map.on("click", onClick);
   });
   onDestroy(() => {
     $map.getCanvas().style.cursor = "inherit";
-
-    $map.off("mousemove", onMouseMove);
-    $map.off("click", onClick);
   });
 
   let snappedCursor: Feature<Point> | null = null;
@@ -48,17 +42,18 @@
     snappedCursorGj = gj;
   }
 
-  function onMouseMove(e: MapMouseEvent) {
+  function onMouseMove(e: CustomEvent<MapMouseEvent>) {
     snappedCursor = null;
     snappedIndex = null;
 
-    let cursor = cursorFeature(e.lngLat.toArray());
+    let cursor = cursorFeature(e.detail.lngLat.toArray());
     const nearbyPoint: [number, number] = [
-      e.point.x - snapDistancePixels,
-      e.point.y,
+      e.detail.point.x - snapDistancePixels,
+      e.detail.point.y,
     ];
     const thresholdKm =
-      $map.unproject(e.point).distanceTo($map.unproject(nearbyPoint)) / 1000.0;
+      $map.unproject(e.detail.point).distanceTo($map.unproject(nearbyPoint)) /
+      1000.0;
 
     // Are we snapped to anything?
     let candidates: [number, Position, number][] = [];
@@ -246,6 +241,8 @@
 
 <svelte:window on:keydown={onKeyDown} />
 
+<MapEvents on:mousemove={onMouseMove} on:click={onClick} />
+
 <GeoJSON data={snappedCursorGj}>
   <CircleLayer
     {...layerId("draw-split-route")}