Update to deck.gl v9

This is a minimal change, a future change with better support for the
next MapboxOverlay will be coming.

Author: dimfeld

.changeset/chilly-days-enjoy.md

@@ -0,0 +1,5 @@
+---
+'svelte-maplibre': major
+---
+
+Update to deck.gl v9

package.json

@@ -82,17 +82,17 @@
     "pmtiles": "^3.0.3"
   },
   "peerDependencies": {
-    "@deck.gl/core": "^8.8.0",
-    "@deck.gl/layers": "^8.8.0",
-    "@deck.gl/mapbox": "^8.8.0",
+    "@deck.gl/core": "^9",
+    "@deck.gl/layers": "^9",
+    "@deck.gl/mapbox": "^9",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.9",
-    "@deck.gl/core": "~8.8.0",
-    "@deck.gl/layers": "~8.8.0",
-    "@deck.gl/mapbox": "~8.8.0",
+    "@deck.gl/core": "~9.0.35",
+    "@deck.gl/layers": "~9.0.35",
+    "@deck.gl/mapbox": "~9.0.35",
     "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@playwright/test": "^1.48.2",
     "@skeletonlabs/skeleton": "^2.10.3",

pnpm-lock.yaml

@@ -7,12 +7,13 @@
     mapContext,
     setPopupTarget,
     updatedDeckGlContext,
-    updatedLayerContext,
     type DeckGlMouseEvent,
   } from './context.svelte.js';
+  import type { PickingInfo } from '@deck.gl/core';
 
   interface Props {
     id?: any;
+    interleaved?: boolean;
     minzoom?: number | undefined;
     maxzoom?: number | undefined;
     visible?: boolean;
@@ -23,24 +24,27 @@
     /** The deck.gl layer class to create */
     type: any;
     data: DATA[];
+    beforeId?: string;
     children?: Snippet;
 
-    onclick?: (e: DeckGlMouseEvent<DATA>) => void;
-    onmousemove?: (e: DeckGlMouseEvent<DATA>) => void;
-    onmouseleave?: (e: DeckGlMouseEvent<DATA>) => void;
+    onclick?: (e: PickingInfo<DATA>) => void;
+    onmousemove?: (e: PickingInfo<DATA>) => void;
+    onmouseleave?: (e: PickingInfo<DATA>) => void;
 
     [key: string]: any;
   }
 
   let {
     id = getId('deckgl-layer'),
+    interleaved = false,
     minzoom = undefined,
     maxzoom = undefined,
     visible = true,
     interactive = true,
     hovered = $bindable(),
     type,
     data,
+    beforeId = undefined,
     children,
 
     onclick = undefined,
@@ -53,10 +57,8 @@
   const context = mapContext();
   const { map, minzoom: minZoomContext, maxzoom: maxZoomContext } = context;
 
-  // @ts-expect-error No types
   let deckgl: typeof import('@deck.gl/mapbox') | undefined = $state();
   onMount(async () => {
-    // @ts-expect-error No types
     deckgl = await import('@deck.gl/mapbox');
   });
 
@@ -70,7 +72,7 @@
     zoom = map.getZoom();
   }
 
-  function handleClick(e: DeckGlMouseEvent<DATA>) {
+  function handleClick(e: PickingInfo<DATA>) {
     if (!interactive) {
       return;
     }
@@ -83,7 +85,7 @@
     };
   }
 
-  function handleHover(e: DeckGlMouseEvent<DATA>) {
+  function handleHover(e: PickingInfo<DATA>) {
     if (!interactive) {
       return;
     }
@@ -99,8 +101,7 @@
     };
   }
 
-  // @ts-expect-error No types
-  let layer: typeof import('@deck.gl/mapbox').MapboxLayer | undefined = $state();
+  let layer: import('@deck.gl/mapbox').MapboxOverlay | undefined = $state();
 
   onDestroy(() => {
     if (map.loaded() && layer) {
@@ -117,6 +118,7 @@
   let visibility = $derived(visible && zoom >= actualMinZoom && zoom <= actualMaxZoom);
   let options = $derived({
     ...rest,
+    beforeId,
     visible: visibility,
     data,
     pickable: interactive,
@@ -129,16 +131,19 @@
       map.on('zoomend', handleZoom);
       handleZoom();
 
-      layer = new deckgl.MapboxLayer({
+      layer = new deckgl.MapboxOverlay({
         id,
-        type,
-        ...options,
+        interleaved,
+        layers: [new type(options)],
       });
-      map.addLayer(layer);
+      // @ts-expect-error Mapbox/Maplibre types don't quite match
+      map.addControl(layer);
     }
   });
   $effect(() => {
-    layer?.setProps(options);
+    layer?.setProps({
+      layers: [new type(options)],
+    });
   });
 </script>
 

src/lib/DeckGlLayer.svelte

@@ -192,7 +192,7 @@
 
   function handleLayerEvent(e: MapLayerMouseEvent | LayerEvent) {
     if ('layerType' in e && e.layerType === 'deckgl') {
-      lngLat = e.coordinate;
+      lngLat = e.coordinate as [number, number];
       features = e.object ? [e.object as DATA] : undefined;
     } else {
       lngLat = e.lngLat;

src/lib/Popup.svelte

@@ -2,6 +2,7 @@ import type { Map as MapLibre, MapMouseEvent, Marker } from 'maplibre-gl';
 import { getContext, setContext } from 'svelte';
 import { SvelteSet } from 'svelte/reactivity';
 import type { ClusterOptions, MarkerClickInfo } from './types';
+import type { PickingInfo } from '@deck.gl/core';
 
 // Choose current time instead of 0 to avoid possible reuse during HMR.
 export let nextId = Date.now();
@@ -136,17 +137,9 @@ export function setLayerEvent(value: Box<LayerEvent | undefined>) {
 
 export type MarkerMouseEvent = MarkerClickInfo & { layerType: 'marker'; type: string };
 
-export interface DeckGlMouseEvent<DATA = unknown> {
+export interface DeckGlMouseEvent<DATA = unknown> extends PickingInfo<DATA> {
   layerType: 'deckgl';
   type: 'click' | 'mouseenter' | 'mouseleave' | 'mousemove';
-  coordinate: [number, number];
-  object?: DATA;
-  index: number;
-  picked: boolean;
-  color: Uint8Array | null;
-  pixel: [number, number];
-  x: number;
-  y: number;
 }
 
 export type LayerEvent = DeckGlMouseEvent<unknown> | MarkerMouseEvent;

src/lib/context.svelte.ts

@@ -5,7 +5,6 @@
   // Importing from `@deck.gl/layers` so that we can do a direct import
   // that works even in SSR, as opposed to importing from `deck.gl` which does not.
   // Note that this stopped working in deck.gl 8.9.
-  // @ts-expect-error no types
   import { ArcLayer } from '@deck.gl/layers';
   // imports end
   import CodeSample from '$site/CodeSample.svelte';