feat: Terra Draw

package.json

@@ -57,6 +57,10 @@
 		"./pmtiles": {
 			"types": "./dist/ext/pmtiles/index.d.ts",
 			"svelte": "./dist/ext/pmtiles/index.js"
+		},
+		"./terradraw": {
+			"types": "./dist/ext/terradraw/index.d.ts",
+			"svelte": "./dist/ext/terradraw/index.js"
 		}
 	},
 	"peerDependencies": {
@@ -65,7 +69,9 @@
 		"maplibre-contour": ">=0.1.0",
 		"maplibre-gl": "^5.0.0 || ^5.0.0-pre || ^4.0.0",
 		"pmtiles": "^4.0.0",
-		"svelte": ">=5.0.0"
+		"svelte": ">=5.0.0",
+		"terra-draw": "^1.0.0",
+		"terra-draw-maplibre-gl-adapter": "^1.0.1"
 	},
 	"devDependencies": {
 		"@deck.gl/layers": "^9.0.40",
@@ -88,11 +94,13 @@
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^2.46.1",
 		"globals": "^15.14.0",
+		"install": "^0.13.0",
 		"lucide-svelte": "^0.471.0",
 		"maplibre-contour": "^0.1.0",
 		"maplibre-gl": "^5.0.1",
 		"mdsvex": "^0.12.3",
 		"mode-watcher": "^0.5.0",
+		"npm": "^11.0.0",
 		"pathe": "^2.0.1",
 		"pkg-pr-new": "^0.0.39",
 		"pmtiles": "^4.2.1",

src/content/examples/terradraw/TerraDraw.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { MapLibre, GlobeControl } from 'svelte-maplibre-gl';
+	import { TerraDraw } from 'svelte-maplibre-gl/terradraw';
+	import type { TerraDraw as Draw } from 'terra-draw';
+	import {
+		TerraDrawCircleMode,
+		TerraDrawRectangleMode,
+		TerraDrawFreehandMode,
+		TerraDrawAngledRectangleMode,
+		TerraDrawLineStringMode,
+		TerraDrawPolygonMode,
+		TerraDrawPointMode,
+		TerraDrawSectorMode,
+		TerraDrawSelectMode,
+		TerraDrawSensorMode
+	} from 'terra-draw';
+
+	const defaultSelectFlags = {
+		feature: {
+			draggable: true,
+			coordinates: {
+				deletable: true,
+				midpoints: true,
+				draggable: true
+			}
+		}
+	};
+	const modes = [
+		new TerraDrawSelectMode({
+			flags: {
+				point: defaultSelectFlags,
+				linestring: defaultSelectFlags,
+				polygon: defaultSelectFlags,
+				freehand: defaultSelectFlags,
+				circle: defaultSelectFlags,
+				rectangle: defaultSelectFlags,
+				sector: defaultSelectFlags,
+				sensor: defaultSelectFlags,
+				'angled-rectangle': defaultSelectFlags
+			}
+		}),
+		new TerraDrawPointMode(),
+		new TerraDrawLineStringMode(),
+		new TerraDrawPolygonMode(),
+		new TerraDrawCircleMode(),
+		new TerraDrawSectorMode(),
+		new TerraDrawSensorMode(),
+		new TerraDrawRectangleMode(),
+		new TerraDrawFreehandMode(),
+		new TerraDrawAngledRectangleMode()
+	];
+	const modeNames = modes.map((mode) => mode.mode);
+	let mode = $state('select');
+	let selected: string | number | null = $state(null);
+	let draw: Draw | undefined = $state.raw();
+</script>
+
+<MapLibre
+	class="h-[55vh] min-h-[300px]"
+	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+	zoom={2}
+	center={{ lng: 60, lat: 20 }}
+>
+	<!-- Terra Draw -->
+	<TerraDraw
+		{mode}
+		{modes}
+		bind:draw
+		onselect={(featureId) => (selected = featureId)}
+		ondeselect={() => (selected = null)}
+		onfinish={() => (mode = 'select')}
+	/>
+
+	<!-- Draw controls -->
+	<div
+		class="absolute left-3 top-3 z-10 flex flex-col items-stretch gap-1 rounded bg-background/60 p-3 text-sm backdrop-blur"
+	>
+		{#each modeNames as modeName}
+			<label><input type="radio" bind:group={mode} value={modeName} class="mr-1" /> {modeName}</label>
+		{/each}
+		{#if selected}
+			<button
+				class="mt-1 rounded border px-1"
+				onclick={() => {
+					if (!selected) return;
+					draw?.removeFeatures([selected]);
+					draw?.deselectFeature(selected);
+				}}>Remove</button
+			>
+		{/if}
+	</div>
+	<GlobeControl />
+</MapLibre>

src/content/examples/terradraw/content.svelte.md

@@ -0,0 +1,15 @@
+---
+title: Terra Draw
+description: terra-draw
+---
+
+<script lang="ts">
+  import Demo from "./TerraDraw.svelte";
+  import demoRaw from "./TerraDraw.svelte?raw";
+  import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
+</script>
+
+<Demo />
+
+<CodeBlock content={demoRaw} {shiki} />

src/content/examples/toc.ts

@@ -56,7 +56,8 @@ export const toc: Toc = [
 		items: {
 			'/examples/pmtiles': 'PMTiles Protocol',
 			'/examples/deckgl-overlay': 'deck.gl Overlay',
-			'/examples/contour': 'Contour Lines'
+			'/examples/contour': 'Contour Lines',
+			'/examples/terradraw': 'Terra Draw'
 		}
 	}
 ];