DeckGL loading and usage in Sveltekit

[matthalstead]

The SSR part of Sveltekit seems to require Deck.gl to be loaded client side only using checks. I have used the following, which works, but wondering if there is a better/cleaner way to do this?

The following is in a +page.svelte file.

<script>
	import { DeckGlLayer, MapLibre } from 'svelte-maplibre';
	import { onMount } from 'svelte';

	let ScatterplotLayer;
	let loaded = false;

	onMount(async () => {
		const module = await import('deck.gl');
		ScatterplotLayer = module.ScatterplotLayer;
		loaded = true;
	});

</script>

<div class="map-wrap">
	{#if loaded}
	<MapLibre
		center={[175.866775,-38.776238]}
		maxZoom={11}
		zoom={5}
		class="map relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
		standardControls
		style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json">

		<DeckGlLayer
			id="my-layer"
			type={ScatterplotLayer}
			data={[
						 {position: [175.866775,-38.776238]}
			 ]}
			getPosition={(d) => d.position}
			getFillColor={[255, 0, 0, 100]}
			getRadius={1000}>
		</DeckGlLayer>
	</MapLibre>
		{/if}
</div>
<style>
    :global(.map) {
        height: 900px;
    }
</style>

[dimfeld]

It's been a while since I looked at this but when I wrote the original example I imported the layer from the @deck.gl/layers package, instead of the main deck.gl package.

svelte-maplibre/src/routes/examples/deckgl-arcs/+page.svelte

Line 12 in 5a27ea2

import { ArcLayer } from '@deck.gl/layers';

If I remember right, importing directly from there should work fine on the server. I also just realized that the deck.gl demo page on the website doesn't make that clear. I'll update that.