Merge pull request #37 from MIERUNE/deckgl

Initial deck.gl support

src/content/examples/Index.svelte

@@ -19,6 +19,7 @@
 		'/examples/image-loader': 'Loading Images',
 		'/examples/custom-control': 'Custom Control',
 		'/examples/custom-protocol': 'Custom Protocols',
+		'/examples/deckgl-overlay': 'deck.gl Overlay',
 		'/examples/contour': 'Contour Lines'
 	};
 </script>

src/content/examples/deckgl-overlay/DeckGL.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import FillExtrusionLayer from '$lib/maplibre/layers/FillExtrusionLayer.svelte';
+	import { ArcLayer } from '@deck.gl/layers';
+	import { onMount } from 'svelte';
+	import { MapLibre, DeckGLOverlay } from 'svelte-maplibre-gl';
+
+	const NUM = 30;
+	let data: { source: [number, number]; target: [number, number] }[] = $state([]);
+
+	onMount(() => {
+		let handle = requestAnimationFrame(function updateFrame(t) {
+			data = Array.from({ length: NUM }, (_, i) => {
+				const O = (2 * Math.PI) / NUM;
+				const r = (1.3 + Math.sin(t / 510 + i * O)) * 0.002;
+				return {
+					source: [139.7672, 35.6812],
+					target: [139.7672 + Math.cos(t / 730 + i * O) * r, 35.6812 + Math.sin(t / 730 + i * O) * r]
+				};
+			});
+			handle = requestAnimationFrame(updateFrame);
+		});
+		return () => cancelAnimationFrame(handle);
+	});
+</script>
+
+<MapLibre
+	class="h-[60vh] min-h-[300px]"
+	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+	zoom={15}
+	pitch={60}
+	minZoom={4}
+	bearing={-45}
+	center={[139.7672, 35.6812]}
+>
+	<DeckGLOverlay
+		interleaved
+		layers={[
+			new ArcLayer({
+				id: 'deckgl-arc',
+				data,
+				getSourcePosition: (d) => d.source,
+				getTargetPosition: (d) => d.target,
+				getSourceColor: [0, 255, 100],
+				getTargetColor: [0, 190, 255],
+				getWidth: 5
+			})
+		]}
+	/>
+	<FillExtrusionLayer
+		source="carto"
+		sourceLayer="building"
+		minzoom={14}
+		paint={{
+			'fill-extrusion-color': '#aaa',
+			'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 14, 0, 14.05, ['get', 'render_height']],
+			'fill-extrusion-base': ['interpolate', ['linear'], ['zoom'], 14, 0, 14.05, ['get', 'render_min_height']],
+			'fill-extrusion-opacity': 0.8
+		}}
+	/>
+</MapLibre>

src/content/examples/deckgl-overlay/content.svelte.md

@@ -0,0 +1,14 @@
+---
+title: deck.gl Overlay
+description: Interleaving deck.gl with MapLibre layers
+---
+
+<script lang="ts">
+  import Demo from "./DeckGL.svelte";
+  import demoRaw from "./DeckGL.svelte?raw";
+  import CodeBlock from "../../CodeBlock.svelte";
+</script>
+
+<Demo />
+
+<CodeBlock content={demoRaw} />

src/lib/maplibre/extensions/DeckGLOverlay.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+	import { MapboxOverlay, type MapboxOverlayProps } from '@deck.gl/mapbox';
+	import { getMapContext } from '../contexts.svelte.js';
+
+	type Props = MapboxOverlayProps;
+
+	let {
+		// not reactive (?)
+		interleaved = false,
+		id,
+		debug,
+		_typedArrayManagerProps,
+		// reactive (?)
+		layers,
+		layerFilter,
+		effects = [],
+		parameters,
+		useDevicePixels,
+		pickingRadius
+	}: Props = $props();
+
+	const mapCtx = getMapContext();
+	if (!mapCtx.map) throw new Error('Map instance is not initialized.');
+
+	let deckOverlay: MapboxOverlay;
+	onMount(() => {
+		deckOverlay = new MapboxOverlay({
+			id,
+			parameters,
+			debug,
+			_typedArrayManagerProps,
+			interleaved,
+			layers,
+			effects
+		});
+
+		mapCtx.map?.addControl(deckOverlay);
+	});
+
+	let firstRun = true;
+
+	$effect(() => {
+		layers;
+		if (!firstRun) {
+			deckOverlay.setProps({ layers });
+		}
+	});
+
+	$effect(() => {
+		effects;
+		if (!firstRun) {
+			deckOverlay.setProps({ effects });
+		}
+	});
+
+	$effect(() => {
+		pickingRadius;
+		if (!firstRun) {
+			deckOverlay.setProps({ pickingRadius });
+		}
+	});
+
+	$effect(() => {
+		parameters;
+		if (!firstRun) {
+			deckOverlay.setProps({ parameters });
+		}
+	});
+
+	$effect(() => {
+		layerFilter;
+		if (!firstRun) {
+			deckOverlay.setProps({ layerFilter });
+		}
+	});
+
+	$effect(() => {
+		useDevicePixels;
+		if (!firstRun) {
+			deckOverlay.setProps({ useDevicePixels });
+		}
+	});
+
+	$effect(() => {
+		firstRun = false;
+	});
+
+	onDestroy(() => {
+		mapCtx.map?.removeControl(deckOverlay);
+	});
+</script>

src/lib/maplibre/index.ts

@@ -55,6 +55,7 @@ export { default as ImageLoader } from './utilities/ImageLoader.svelte';
 // extensions
 export { default as PMTilesProtocol } from './extensions/PMTilesProtocol.svelte';
 export { default as MapLibreContourSource } from './extensions/MapLibreContourSource.svelte';
+export { default as DeckGLOverlay } from './extensions/DeckGLOverlay.svelte';
 
 // contexts
 export { getMapContext, getSourceContext, getMarkerContext } from './contexts.svelte.js';