draft

package.json

@@ -39,7 +39,7 @@
 	"devDependencies": {
 		"@playwright/test": "^1.48.2",
 		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/kit": "^2.8.0",
+		"@sveltejs/kit": "^2.8.1",
 		"@sveltejs/package": "^2.3.7",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tailwindcss/typography": "^0.5.15",
@@ -55,19 +55,19 @@
 		"maplibre-gl": "5.0.0-pre.6",
 		"mdsvex": "^0.12.3",
 		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.7",
+		"prettier-plugin-svelte": "^3.2.8",
 		"prettier-plugin-tailwindcss": "^0.6.8",
 		"publint": "^0.2.12",
-		"svelte": "^5.1.12",
-		"svelte-check": "^4.0.5",
+		"svelte": "^5.1.16",
+		"svelte-check": "^4.0.7",
 		"tailwind-merge": "^2.5.4",
 		"tailwind-variants": "^0.2.1",
 		"tailwindcss": "^3.4.14",
 		"tailwindcss-animate": "^1.0.7",
 		"typescript": "^5.6.3",
-		"typescript-eslint": "^8.13.0",
-		"vite": "^5.4.10",
-		"vitest": "^2.1.4"
+		"typescript-eslint": "^8.14.0",
+		"vite": "^5.4.11",
+		"vitest": "^2.1.5"
 	},
 	"packageManager": "[email protected]+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1",
 	"dependencies": {

src/content/examples/canvas-source/Canvas.svelte

@@ -1,52 +1,56 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
 	import { MapLibre, CanvasSource, GlobeControl, RasterLayer } from 'svelte-maplibre-gl';
 	import { Circle } from './Circle.js';
 
-	const SIZE = 400;
-	const RADIUS = 20;
+	let canvas: HTMLCanvasElement | undefined = $state();
+	let ctx = $derived(canvas && canvas.getContext('2d')!);
+	let animate = $state(true);
 
-	if (browser) {
-		const canvas = document.getElementById('canvasId') as HTMLCanvasElement;
-		const ctx = canvas.getContext('2d')!;
-		const circles: Circle[] = [];
-
-		for (let i = 0; i < 10; i++) {
-			const color = `#${(0x1000000 + Math.random() * 0xffffff).toString(16).substring(1, 7)}`;
-			const x = Math.random() * (SIZE - RADIUS * 2) + RADIUS;
-			const y = Math.random() * (SIZE - RADIUS * 2) + RADIUS;
-			const dx = (Math.random() - 0.5) * 2;
-			const dy = (Math.random() - 0.5) * 2;
-			circles.push(new Circle(x, y, dx, dy, RADIUS, color));
-		}
+	const SIZE = 500;
+	const RADIUS = 15;
+	const circles: Circle[] = [];
+	for (let i = 0; i < 20; i++) {
+		const x = Math.random() * (SIZE - RADIUS * 2) + RADIUS;
+		const y = Math.random() * (SIZE - RADIUS * 2) + RADIUS;
+		const dx = (Math.random() - 0.5) * 2;
+		const dy = (Math.random() - 0.5) * 2;
+		const color = `#${(0x1000000 + Math.random() * 0xffffff).toString(16).substring(1, 7)}`;
+		circles.push(new Circle(x, y, dx, dy, RADIUS, color));
+	}
 
-		function animate() {
+	function frame() {
+		if (ctx && animate) {
 			ctx.clearRect(0, 0, SIZE, SIZE);
 			for (const circle of circles) {
 				circle.update(ctx);
 			}
-			requestAnimationFrame(animate);
 		}
-		animate();
+		requestAnimationFrame(frame);
 	}
+
+	$effect(() => {
+		requestAnimationFrame(frame);
+	});
 </script>
 
-<canvas id="canvasId" class="hidden" width={SIZE} height={SIZE}>Canvas not supported</canvas>
+<canvas bind:this={canvas} class="hidden" width={SIZE} height={SIZE}>Canvas not supported</canvas>
 
 <MapLibre
 	class="h-[60vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
-	zoom={5}
-	center={{ lng: 95.899147, lat: 18.088694 }}
+	zoom={2}
+	center={{ lng: 135, lat: 35 }}
+	onclick={() => (animate = !animate)}
 >
 	<GlobeControl />
 	<CanvasSource
-		canvas="canvasId"
+		{canvas}
+		{animate}
 		coordinates={[
-			[91.4461, 21.5006],
-			[100.3541, 21.5006],
-			[100.3541, 13.9706],
-			[91.4461, 13.9706]
+			[110, 60],
+			[160, 60],
+			[160, 10],
+			[110, 10]
 		]}
 	>
 		<RasterLayer paint={{ 'raster-fade-duration': 0 }} />

src/content/examples/canvas-source/Circle.ts

@@ -16,10 +16,10 @@ export class Circle {
 	}
 
 	update(ctx: CanvasRenderingContext2D) {
-		if (this.x + this.radius > 400 || this.x - this.radius < 0) {
+		if (this.x + this.radius > ctx.canvas.width || this.x - this.radius < 0) {
 			this.dx = -this.dx;
 		}
-		if (this.y + this.radius > 400 || this.y - this.radius < 0) {
+		if (this.y + this.radius > ctx.canvas.height || this.y - this.radius < 0) {
 			this.dy = -this.dy;
 		}
 		this.x += this.dx;

src/lib/maplibre/context.svelte.ts

@@ -48,6 +48,7 @@ class MapContext {
 		this.map?.removeSource(id);
 	}
 
+	// Preserves user styles when the base style changes
 	setStyle(style: string | StyleSpecification | null) {
 		const { userSources: addedSources, userLayers: addedLayers } = this;
 		if (!style) {

src/lib/maplibre/index.ts

@@ -7,9 +7,6 @@ export { default as Light } from './map/Light.svelte';
 export { default as Projection } from './map/Projection.svelte';
 export { default as Terrain } from './map/Terrain.svelte';
 
-// resources
-export { default as Image } from './map/Image.svelte';
-
 // sources
 export { default as VectorTileSource } from './sources/VectorTileSource.svelte';
 export { default as RasterTileSource } from './sources/RasterTileSource.svelte';
@@ -30,6 +27,9 @@ export { default as RasterLayer } from './layers/RasterLayer.svelte';
 export { default as HillshadeLayer } from './layers/HillshadeLayer.svelte';
 export { default as BackgroundLayer } from './layers/BackgroundLayer.svelte';
 
+// resources
+export { default as Image } from './map/Image.svelte';
+
 // markers
 export { default as Marker } from './markers/Marker.svelte';
 export { default as Popup } from './markers/Popup.svelte';

src/lib/maplibre/map/Image.svelte

@@ -25,9 +25,9 @@
 		}
 
 		if (!image) {
-			mapCtx.map?.addImage(id, { width, height, data });
+			mapCtx.map.addImage(id, { width, height, data });
 		} else {
-			mapCtx.map?.updateImage(id, { width, height, data });
+			mapCtx.map.updateImage(id, { width, height, data });
 		}
 	});