Merge pull request #45 from MIERUNE/cursor

Custom cursor

README.md

@@ -5,7 +5,7 @@
 
 Use [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) with the full potential of [Svelte](https://svelte.dev/)'s reactivity.
 
-⚠️ This project is currently in the early stages of development. Features and APIs are subject to change.
+:warning: This project is currently in the early stages of development. Features and APIs are subject to change.
 
 Documentaion and Examples: https://svelte-maplibre-gl.mierune.dev/examples/
 
@@ -17,7 +17,7 @@ License: MIT or Apache 2.0
 npm install --dev svelte-maplibre-gl
 ```
 
-⚠ `svelte-maplibre-gl` only works with Svelte **5** and above.
+:warning: `svelte-maplibre-gl` only works with Svelte **5** and above.
 
 ## License
 

src/content/examples/cursor/Cursor.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { MapLibre, GeoJSONSource } from 'svelte-maplibre-gl';
+	import CircleLayer from '$lib/maplibre/layers/CircleLayer.svelte';
+
+	let cursor: string | undefined = $state();
+	const center = [0, 0];
+	const CURSORS = [
+		'cell',
+		'col-resize',
+		'context-menu',
+		'copy',
+		'crosshair',
+		'default',
+		'grab',
+		'help',
+		'move',
+		'not-allowed',
+		'pointer',
+		'progress',
+		'row-resize',
+		'text',
+		'vertical-text',
+		'wait',
+		'zoom-in',
+		'zoom-out'
+	];
+
+	const data: GeoJSON.FeatureCollection = {
+		type: 'FeatureCollection',
+		features: CURSORS.map((cursor, i) => ({
+			type: 'Feature',
+			geometry: {
+				type: 'Point',
+				coordinates: [
+					center[0] + Math.cos((i / CURSORS.length) * Math.PI * 2) * 15,
+					center[1] + Math.sin((i / CURSORS.length) * Math.PI * 2) * 15
+				]
+			},
+			properties: {
+				cursor
+			}
+		}))
+	};
+</script>
+
+<MapLibre
+	class="h-[55vh] min-h-[300px]"
+	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+	zoom={2}
+	{cursor}
+	center={{ lng: 0, lat: 0 }}
+>
+	<GeoJSONSource {data}>
+		<CircleLayer
+			onmousemove={(e) => {
+				cursor = e.features![0].properties.cursor;
+			}}
+			onmouseleave={() => {
+				cursor = undefined;
+			}}
+			paint={{
+				'circle-radius': 12,
+				'circle-color': '#007cbf',
+				'circle-stroke-color': '#fff',
+				'circle-stroke-width': 3
+			}}
+		/>
+	</GeoJSONSource>
+</MapLibre>

src/content/examples/cursor/content.svelte.md

@@ -0,0 +1,15 @@
+---
+title: Change Cursor
+description: Change the cursor style on hover
+---
+
+<script lang="ts">
+  import Demo from "./Cursor.svelte";
+  import demoRaw from "./Cursor.svelte?raw";
+  import CodeBlock from "../../CodeBlock.svelte";
+  let { shiki } = $props();
+</script>
+
+<Demo />
+
+<CodeBlock content={demoRaw} {shiki} />

src/lib/maplibre/map/MapLibre.svelte

@@ -18,6 +18,7 @@
 		center?: LngLatLike;
 		padding?: maplibregl.PaddingOptions;
 		fov?: number;
+		cursor?: string;
 
 		// Accessors
 		// https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#accessors
@@ -96,6 +97,7 @@
 		// Others
 		padding = { top: 0, bottom: 0, left: 0, right: 0 },
 		fov,
+		cursor,
 
 		// Accessors
 		showTileBoundaries,
@@ -196,6 +198,10 @@
 		map = new maplibregl.Map(options);
 		mapCtx.map = map ?? null;
 
+		if (cursor) {
+			map.getCanvas().style.cursor = cursor ?? '';
+		}
+
 		map.on('move', () => {
 			if (!map) {
 				return;
@@ -307,6 +313,12 @@
 			map?.setVerticalFieldOfView(fov);
 		}
 	});
+	$effect(() => {
+		cursor;
+		if (map && !firstRun) {
+			map.getCanvas().style.cursor = cursor ?? '';
+		}
+	});
 
 	// Accessors
 	$effect(() => {

src/routes/components/[slug]/+page.ts

@@ -1,11 +1,22 @@
 import { error } from '@sveltejs/kit';
 import type { Component } from 'svelte';
+import { browser } from '$app/environment';
+
+import { createHighlighter, createJavaScriptRegexEngine, createOnigurumaEngine } from 'shiki';
+import svelte from 'shiki/langs/svelte.mjs';
+import dark from 'shiki/themes/github-dark-default.mjs';
+
+const shiki = createHighlighter({
+	themes: [dark],
+	langs: [svelte],
+	engine: browser ? createOnigurumaEngine(import('shiki/wasm')) : createJavaScriptRegexEngine()
+});
 
 export const load = async ({ params }) => {
 	const { slug } = params;
 
 	try {
-		const post = (await import(`$content/examples/${slug}/content.svelte.md`)) as {
+		const post = (await import(`$content/components/${slug}/content.svelte.md`)) as {
 			default: Component;
 			metadata: {
 				title: string;
@@ -14,7 +25,8 @@ export const load = async ({ params }) => {
 		};
 		return {
 			Content: post.default,
-			meta: { ...post.metadata, slug }
+			meta: { ...post.metadata, slug },
+			shiki: await shiki
 		};
 	} catch {
 		error(404, `Example '${slug}' not found`);