CustomLayer component

src/content/CodeBlock.svelte

@@ -1,18 +1,31 @@
 <script lang="ts" module>
-	import type { HighlighterCore } from 'shiki';
+	import {
+		createHighlighterCoreSync,
+		createOnigurumaEngine,
+		createJavaScriptRegexEngine,
+		type HighlighterCore
+	} from 'shiki';
+	import svelte from 'shiki/langs/svelte.mjs';
+	import dark from 'shiki/themes/github-dark-default.mjs';
+	import { browser } from '$app/environment';
+
+	const shiki2 = createHighlighterCoreSync({
+		themes: [dark],
+		langs: [svelte],
+		// Use the WASM version of Oniguruma on the browser, and the JS engine on the server
+		engine: browser ? await createOnigurumaEngine(import('shiki/wasm')) : createJavaScriptRegexEngine()
+	});
 </script>
 
 <script lang="ts">
 	let {
-		content,
-		shiki
+		content
 	}: {
 		content: string;
-		shiki: HighlighterCore;
 	} = $props();
 
 	const highlighted = $derived.by(() => {
-		return shiki.codeToHtml(content.trim(), { lang: 'svelte', theme: 'github-dark-default' });
+		return shiki2.codeToHtml(content.replaceAll('\t', '  ').trim(), { lang: 'svelte', theme: 'github-dark-default' });
 	});
 </script>
 
@@ -36,6 +49,6 @@
 		margin-right: 1.5rem;
 		display: inline-block;
 		text-align: right;
-		color: rgba(115, 138, 148, 0.4);
+		color: rgba(115, 138, 148, 0.5);
 	}
 </style>

src/content/examples/Index.svelte

@@ -21,7 +21,8 @@
 				'/examples/geolocate': 'Locate the User',
 				'/examples/image-loader': 'Load Images from URLs',
 				'/examples/custom-control': 'Custom Control',
-				'/examples/custom-protocol': 'Custom Protocols'
+				'/examples/custom-protocol': 'Custom Protocols',
+				'/examples/custom-layer': 'Custom Layer'
 			}
 		},
 		{

src/content/examples/animate-images/AnimateImages.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
 	zoom={5}
 	center={[-76, 43]}

src/content/examples/animate-images/content.svelte.md

@@ -7,9 +7,8 @@ description: Use a series of image sources to create an animation.
   import Demo from "./AnimateImages.svelte";
   import demoRaw from "./AnimateImages.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
-  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} shiki={shiki} />
+<CodeBlock content={demoRaw} />

src/content/examples/basestyle/BaseStyle.svelte

@@ -41,7 +41,7 @@
 	</div>
 </div>
 
-<MapLibre class="h-[60vh] min-h-[300px]" style={styleUrl} zoom={4} maxPitch={80} center={{ lng: 137, lat: 36 }}>
+<MapLibre class="h-[55vh] min-h-[300px]" style={styleUrl} zoom={4} maxPitch={80} center={{ lng: 137, lat: 36 }}>
 	<Projection type={globe ? 'globe' : undefined} />
 	<Light anchor="map" />
 	<Sky

src/content/examples/basestyle/content.svelte.md

@@ -7,9 +7,8 @@ description: Dynamic contents must be preserved when the base style is changed.
   import Demo from "./BaseStyle.svelte";
   import demoRaw from "./BaseStyle.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
-  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} shiki={shiki} />
+<CodeBlock content={demoRaw} />

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

@@ -36,7 +36,7 @@
 <canvas bind:this={canvas} class="hidden" width={SIZE} height={SIZE}>Canvas not supported</canvas>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
 	zoom={2}
 	center={{ lng: 135, lat: 35 }}

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

@@ -7,9 +7,8 @@ description: Add a canvas source to the map.
   import Demo from "./Canvas.svelte";
   import demoRaw from "./Canvas.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
-  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} shiki={shiki} />
+<CodeBlock content={demoRaw} />

src/content/examples/clusters/Clusters.svelte

@@ -28,7 +28,7 @@
 </div>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
 	zoom={2}
 	center={{ lng: 180, lat: 35 }}

src/content/examples/clusters/content.svelte.md

@@ -7,9 +7,8 @@ description: Use MapLibre's built-in functions to visualize points as clusters.
   import Demo from "./Clusters.svelte";
   import demoRaw from "./Clusters.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
-  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} shiki={shiki} />
+<CodeBlock content={demoRaw} />

src/content/examples/complex/Complex.svelte

@@ -134,7 +134,7 @@
 </div>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	bind:map
 	bind:zoom
 	bind:center

src/content/examples/complex/content.svelte.md

@@ -7,9 +7,8 @@ description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiu
   import Demo from "./Complex.svelte";
   import demoRaw from "./Complex.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
-  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} shiki={shiki} />
+<CodeBlock content={demoRaw} />

src/content/examples/contour/Contour.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	style="https://demotiles.maplibre.org/styles/osm-bright-gl-style/style.json"
 	zoom={12}
 	minZoom={10}

src/content/examples/contour/content.svelte.md

@@ -7,9 +7,8 @@ description: Render contour lines from a raster DEM source using maplibre-contou
   import Demo from "./Contour.svelte";
   import demoRaw from "./Contour.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
-  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} shiki={shiki} />
+<CodeBlock content={demoRaw} />

src/content/examples/custom-control/CustomControl.svelte

@@ -26,7 +26,7 @@
 	});
 </script>
 
-<MapLibre class="h-[50vh] min-h-[200px]" style={mapStyle} zoom={12} pitch={40} maxPitch={85} bind:center>
+<MapLibre class="h-[55vh] min-h-[200px]" style={mapStyle} zoom={12} pitch={40} maxPitch={85} bind:center>
 	<!-- inject IControl (useful for plugin) -->
 	<CustomControl position="top-left" control={myControl} />
 

src/content/examples/custom-control/content.svelte.md

@@ -4,11 +4,11 @@ description: Custom Control allows to easily create user defined controls.
 ---
 
 <script lang="ts">
-  import CustomControl from "./CustomControl.svelte";
+  import Demo from "./CustomControl.svelte";
   import demoRaw from "./CustomControl.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
 </script>
 
-<CustomControl />
+<Demo />
 
 <CodeBlock content={demoRaw} />

src/content/examples/custom-layer/CustomLayer.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { MapLibre, CustomLayer } from 'svelte-maplibre-gl';
+	import maplibregl from 'maplibre-gl';
+
+	class CustomLayerImpl implements Omit<maplibregl.CustomLayerInterface, 'id' | 'type'> {
+		program: WebGLProgram | null = null;
+		aPos: number = 0;
+		buffer: WebGLBuffer | null = null;
+
+		onAdd(_map: maplibregl.Map, gl: WebGL2RenderingContext) {
+			//create GLSL source for vertex shader
+			const vertexSource = `#version 300 es
+			uniform mat4 u_matrix;
+			in vec2 a_pos;
+			void main() {
+					gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);
+			}`;
+
+			// create GLSL source for fragment shader
+			const fragmentSource = `#version 300 es
+			out highp vec4 fragColor;
+			void main() {
+					fragColor = vec4(1.0, 0.0, 0.0, 0.5);
+			}`;
+
+			// create a vertex shader
+			const vertexShader = gl.createShader(gl.VERTEX_SHADER)!;
+			gl.shaderSource(vertexShader, vertexSource);
+			gl.compileShader(vertexShader);
+
+			// create a fragment shader
+			const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)!;
+			gl.shaderSource(fragmentShader, fragmentSource);
+			gl.compileShader(fragmentShader);
+
+			// link the two shaders into a WebGL program
+			this.program = gl.createProgram()!;
+			gl.attachShader(this.program, vertexShader);
+			gl.attachShader(this.program, fragmentShader);
+			gl.linkProgram(this.program);
+
+			this.aPos = gl.getAttribLocation(this.program, 'a_pos');
+
+			// define vertices of the triangle to be rendered in the custom style layer
+			const helsinki = maplibregl.MercatorCoordinate.fromLngLat({ lng: 25.004, lat: 60.239 });
+			const berlin = maplibregl.MercatorCoordinate.fromLngLat({ lng: 13.403, lat: 52.562 });
+			const kyiv = maplibregl.MercatorCoordinate.fromLngLat({ lng: 30.498, lat: 50.541 });
+
+			// create and initialize a WebGLBuffer to store vertex and color data
+			this.buffer = gl.createBuffer();
+			gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+			gl.bufferData(
+				gl.ARRAY_BUFFER,
+				new Float32Array([helsinki.x, helsinki.y, berlin.x, berlin.y, kyiv.x, kyiv.y]),
+				gl.STATIC_DRAW
+			);
+		}
+
+		// method fired on each animation frame
+		render(gl: WebGL2RenderingContext | WebGLRenderingContext, options: maplibregl.CustomRenderMethodInput) {
+			gl.useProgram(this.program);
+			gl.uniformMatrix4fv(
+				gl.getUniformLocation(this.program!, 'u_matrix'),
+				false,
+				options.defaultProjectionData.mainMatrix
+			);
+			gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+			gl.enableVertexAttribArray(this.aPos);
+			gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, 0, 0);
+			gl.enable(gl.BLEND);
+			gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+			gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
+		}
+	}
+
+	const customLayerImpl = new CustomLayerImpl();
+</script>
+
+<MapLibre
+	class="h-[55vh] min-h-[300px]"
+	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+	zoom={3}
+	center={[20, 58]}
+	antialias
+>
+	<CustomLayer implementation={customLayerImpl} />
+</MapLibre>

src/content/examples/custom-layer/content.svelte.md

@@ -0,0 +1,14 @@
+---
+title: Custom style layer
+description: Use a custom style layer to render custom WebGL content.
+---
+
+<script lang="ts">
+  import Demo from "./CustomLayer.svelte";
+  import demoRaw from "./CustomLayer.svelte?raw";
+  import CodeBlock from "../../CodeBlock.svelte";
+</script>
+
+<Demo />
+
+<CodeBlock content={demoRaw} />

src/content/examples/custom-protocol/CustomProtocol.svelte

@@ -43,7 +43,7 @@
 <Protocol scheme="myprotocol" loadFn={myProtocolLoadFn} />
 
 <!-- Use custom protocols -->
-<MapLibre class="h-[50vh] min-h-[200px]" zoom={6} center={{ lng: 140.0, lat: 37.5 }}>
+<MapLibre class="h-[55vh] min-h-[200px]" zoom={6} center={{ lng: 140.0, lat: 37.5 }}>
 	<VectorTileSource url="pmtiles://https://tile.openstreetmap.jp/static/planet.pmtiles">
 		<LineLayer sourceLayer="transportation" paint={{ 'line-color': 'orange' }} />
 		<FillLayer sourceLayer="water" paint={{ 'fill-color': 'dodgerblue' }} />

src/content/examples/custom-protocol/content.svelte.md

@@ -4,11 +4,11 @@ description: How to add custom protocols.
 ---
 
 <script lang="ts">
-  import CustomProtocol from "./CustomProtocol.svelte";
+  import Demo from "./CustomProtocol.svelte";
   import demoRaw from "./CustomProtocol.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
 </script>
 
-<CustomProtocol />
+<Demo />
 
 <CodeBlock content={demoRaw} />

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

@@ -23,7 +23,7 @@
 </script>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
 	zoom={15}
 	pitch={60}

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

@@ -7,9 +7,8 @@ description: Interleaving deck.gl with MapLibre layers
   import Demo from "./DeckGL.svelte";
   import demoRaw from "./DeckGL.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
-  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} shiki={shiki} />
+<CodeBlock content={demoRaw} />

src/content/examples/dynamic-image/DynamicImage.svelte

@@ -17,7 +17,7 @@
 </script>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px]"
+	class="h-[55vh] min-h-[300px]"
 	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
 	zoom={4}
 	center={{ lng: 137, lat: 36 }}

src/content/examples/dynamic-image/content.svelte.md

@@ -7,9 +7,8 @@ description: Add an icon to the map that was generated at runtime.
   import Demo from "./DynamicImage.svelte";
   import demoRaw from "./DynamicImage.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
-  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} shiki={shiki} />
+<CodeBlock content={demoRaw} />

src/content/examples/fullscreen/Fullscreen.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <MapLibre
-	class="h-[60vh] min-h-[300px] border-8 border-slate-500"
+	class="h-[55vh] min-h-[300px] border-8 border-slate-500"
 	style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
 >
 	<FullScreenControl position="top-left" />

src/content/examples/fullscreen/content.svelte.md

@@ -7,9 +7,8 @@ description: View a fullscreen map
   import Demo from "./Fullscreen.svelte";
   import demoRaw from "./Fullscreen.svelte?raw";
   import CodeBlock from "../../CodeBlock.svelte";
-  let { shiki } = $props();
 </script>
 
 <Demo />
 
-<CodeBlock content={demoRaw} shiki={shiki} />
+<CodeBlock content={demoRaw} />

src/content/examples/geolocate/Geolocate.svelte

@@ -7,7 +7,7 @@
 	}
 </script>
 
-<div class="flex h-[60vh] min-h-[300px] overflow-hidden rounded-md">
+<div class="flex h-[55vh] min-h-[300px] overflow-hidden rounded-md">
 	<pre class="m-0 flex-1 rounded-none">{logString}</pre>
 	<MapLibre class="flex-1" style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json">
 		<GeolocateControl