diff --git a/src/content/CodeBlock.svelte b/src/content/CodeBlock.svelte index 4849934..54629af 100644 --- a/src/content/CodeBlock.svelte +++ b/src/content/CodeBlock.svelte @@ -1,18 +1,31 @@ @@ -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); } diff --git a/src/content/examples/Index.svelte b/src/content/examples/Index.svelte index 9a56b4e..4e99f94 100644 --- a/src/content/examples/Index.svelte +++ b/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' } }, { diff --git a/src/content/examples/animate-images/AnimateImages.svelte b/src/content/examples/animate-images/AnimateImages.svelte index d6d010b..b40d6ba 100644 --- a/src/content/examples/animate-images/AnimateImages.svelte +++ b/src/content/examples/animate-images/AnimateImages.svelte @@ -14,7 +14,7 @@ - + diff --git a/src/content/examples/basestyle/BaseStyle.svelte b/src/content/examples/basestyle/BaseStyle.svelte index 21def13..744fb2e 100644 --- a/src/content/examples/basestyle/BaseStyle.svelte +++ b/src/content/examples/basestyle/BaseStyle.svelte @@ -41,7 +41,7 @@ - + - + diff --git a/src/content/examples/canvas-source/Canvas.svelte b/src/content/examples/canvas-source/Canvas.svelte index c64c128..21dd7b2 100644 --- a/src/content/examples/canvas-source/Canvas.svelte +++ b/src/content/examples/canvas-source/Canvas.svelte @@ -36,7 +36,7 @@ - + diff --git a/src/content/examples/clusters/Clusters.svelte b/src/content/examples/clusters/Clusters.svelte index 2db743f..c6f6a89 100644 --- a/src/content/examples/clusters/Clusters.svelte +++ b/src/content/examples/clusters/Clusters.svelte @@ -28,7 +28,7 @@ - + diff --git a/src/content/examples/complex/Complex.svelte b/src/content/examples/complex/Complex.svelte index cee55e9..669186a 100644 --- a/src/content/examples/complex/Complex.svelte +++ b/src/content/examples/complex/Complex.svelte @@ -134,7 +134,7 @@ - + diff --git a/src/content/examples/contour/Contour.svelte b/src/content/examples/contour/Contour.svelte index d9213de..ab851b6 100644 --- a/src/content/examples/contour/Contour.svelte +++ b/src/content/examples/contour/Contour.svelte @@ -11,7 +11,7 @@ - + diff --git a/src/content/examples/custom-control/CustomControl.svelte b/src/content/examples/custom-control/CustomControl.svelte index e1c26b8..ed8e906 100644 --- a/src/content/examples/custom-control/CustomControl.svelte +++ b/src/content/examples/custom-control/CustomControl.svelte @@ -26,7 +26,7 @@ }); - + diff --git a/src/content/examples/custom-control/content.svelte.md b/src/content/examples/custom-control/content.svelte.md index f14805f..f906a2a 100644 --- a/src/content/examples/custom-control/content.svelte.md +++ b/src/content/examples/custom-control/content.svelte.md @@ -4,11 +4,11 @@ description: Custom Control allows to easily create user defined controls. --- - + diff --git a/src/content/examples/custom-layer/CustomLayer.svelte b/src/content/examples/custom-layer/CustomLayer.svelte new file mode 100644 index 0000000..7cecf81 --- /dev/null +++ b/src/content/examples/custom-layer/CustomLayer.svelte @@ -0,0 +1,87 @@ + + + + + diff --git a/src/content/examples/custom-layer/content.svelte.md b/src/content/examples/custom-layer/content.svelte.md new file mode 100644 index 0000000..192c12f --- /dev/null +++ b/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. +--- + + + + + + diff --git a/src/content/examples/custom-protocol/CustomProtocol.svelte b/src/content/examples/custom-protocol/CustomProtocol.svelte index 32cce31..688d4f4 100644 --- a/src/content/examples/custom-protocol/CustomProtocol.svelte +++ b/src/content/examples/custom-protocol/CustomProtocol.svelte @@ -43,7 +43,7 @@ - + diff --git a/src/content/examples/custom-protocol/content.svelte.md b/src/content/examples/custom-protocol/content.svelte.md index 0fe4234..28b8913 100644 --- a/src/content/examples/custom-protocol/content.svelte.md +++ b/src/content/examples/custom-protocol/content.svelte.md @@ -4,11 +4,11 @@ description: How to add custom protocols. --- - + diff --git a/src/content/examples/deckgl-overlay/DeckGL.svelte b/src/content/examples/deckgl-overlay/DeckGL.svelte index 32f58f5..72a2f51 100644 --- a/src/content/examples/deckgl-overlay/DeckGL.svelte +++ b/src/content/examples/deckgl-overlay/DeckGL.svelte @@ -23,7 +23,7 @@ - + diff --git a/src/content/examples/dynamic-image/DynamicImage.svelte b/src/content/examples/dynamic-image/DynamicImage.svelte index ace6e84..a18cf3c 100644 --- a/src/content/examples/dynamic-image/DynamicImage.svelte +++ b/src/content/examples/dynamic-image/DynamicImage.svelte @@ -17,7 +17,7 @@ - + diff --git a/src/content/examples/fullscreen/Fullscreen.svelte b/src/content/examples/fullscreen/Fullscreen.svelte index f417289..e962f1a 100644 --- a/src/content/examples/fullscreen/Fullscreen.svelte +++ b/src/content/examples/fullscreen/Fullscreen.svelte @@ -3,7 +3,7 @@ diff --git a/src/content/examples/fullscreen/content.svelte.md b/src/content/examples/fullscreen/content.svelte.md index 2066150..a4e3470 100644 --- a/src/content/examples/fullscreen/content.svelte.md +++ b/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(); - + diff --git a/src/content/examples/geolocate/Geolocate.svelte b/src/content/examples/geolocate/Geolocate.svelte index 87ba96a..5fdae7a 100644 --- a/src/content/examples/geolocate/Geolocate.svelte +++ b/src/content/examples/geolocate/Geolocate.svelte @@ -7,7 +7,7 @@ } -
+
{logString}
- + diff --git a/src/content/examples/hover-styles/HoverStyles.svelte b/src/content/examples/hover-styles/HoverStyles.svelte index 1c51b7f..bd7320d 100644 --- a/src/content/examples/hover-styles/HoverStyles.svelte +++ b/src/content/examples/hover-styles/HoverStyles.svelte @@ -4,7 +4,7 @@ - + diff --git a/src/content/examples/image-loader/Images.svelte b/src/content/examples/image-loader/Images.svelte index 5fb678e..776b0e3 100644 --- a/src/content/examples/image-loader/Images.svelte +++ b/src/content/examples/image-loader/Images.svelte @@ -30,7 +30,7 @@ - + diff --git a/src/content/examples/limit-interaction/LimitInteraction.svelte b/src/content/examples/limit-interaction/LimitInteraction.svelte index 9332ff3..36c0b00 100644 --- a/src/content/examples/limit-interaction/LimitInteraction.svelte +++ b/src/content/examples/limit-interaction/LimitInteraction.svelte @@ -18,7 +18,7 @@ - + diff --git a/src/content/examples/plain/Plain.svelte b/src/content/examples/plain/Plain.svelte index 4d90237..d72e997 100644 --- a/src/content/examples/plain/Plain.svelte +++ b/src/content/examples/plain/Plain.svelte @@ -3,7 +3,7 @@ - + diff --git a/src/content/examples/side-by-side/SideBySide.svelte b/src/content/examples/side-by-side/SideBySide.svelte index d158001..34e5327 100644 --- a/src/content/examples/side-by-side/SideBySide.svelte +++ b/src/content/examples/side-by-side/SideBySide.svelte @@ -43,7 +43,7 @@
(point = { x: ev.offsetX, y: ev.offsetY })} diff --git a/src/content/examples/side-by-side/content.svelte.md b/src/content/examples/side-by-side/content.svelte.md index b3ffdd8..6dca4e3 100644 --- a/src/content/examples/side-by-side/content.svelte.md +++ b/src/content/examples/side-by-side/content.svelte.md @@ -7,9 +7,8 @@ description: Synchronize two maps. import Demo from "./SideBySide.svelte"; import demoRaw from "./SideBySide.svelte?raw"; import CodeBlock from "../../CodeBlock.svelte"; - let { shiki } = $props(); - + diff --git a/src/content/examples/terrain/Terrain.svelte b/src/content/examples/terrain/Terrain.svelte index 8492973..05daee7 100644 --- a/src/content/examples/terrain/Terrain.svelte +++ b/src/content/examples/terrain/Terrain.svelte @@ -19,7 +19,7 @@
- + diff --git a/src/content/examples/video-on-a-map/Video.svelte b/src/content/examples/video-on-a-map/Video.svelte index abbd99d..1f2c516 100644 --- a/src/content/examples/video-on-a-map/Video.svelte +++ b/src/content/examples/video-on-a-map/Video.svelte @@ -14,7 +14,7 @@ - + diff --git a/src/lib/maplibre/index.ts b/src/lib/maplibre/index.ts index 14379ca..3ec8f1f 100644 --- a/src/lib/maplibre/index.ts +++ b/src/lib/maplibre/index.ts @@ -20,6 +20,7 @@ export { default as GeoJSONSource } from './sources/GeoJSONSource.svelte'; export { default as ImageSource } from './sources/ImageSource.svelte'; export { default as VideoSource } from './sources/VideoSource.svelte'; export { default as CanvasSource } from './sources/CanvasSource.svelte'; +export { default as RawSource } from './sources/RawSource.svelte'; export { default as FeatureState } from './sources/FeatureState.svelte'; // layers @@ -32,6 +33,8 @@ export { default as HeatmapLayer } from './layers/HeatmapLayer.svelte'; export { default as RasterLayer } from './layers/RasterLayer.svelte'; export { default as HillshadeLayer } from './layers/HillshadeLayer.svelte'; export { default as BackgroundLayer } from './layers/BackgroundLayer.svelte'; +export { default as RawLayer } from './layers/RawLayer.svelte'; +export { default as CustomLayer } from './layers/CustomLayer.svelte'; // markers export { default as Marker } from './markers/Marker.svelte'; diff --git a/src/lib/maplibre/layers/CircleLayer.svelte b/src/lib/maplibre/layers/CircleLayer.svelte index c312be1..5db3c3b 100644 --- a/src/lib/maplibre/layers/CircleLayer.svelte +++ b/src/lib/maplibre/layers/CircleLayer.svelte @@ -15,9 +15,9 @@ children?: Snippet; } - let { children, ...props }: Props = $props(); + let { children, sourceLayer, ...props }: Props = $props(); - + {@render children?.()} diff --git a/src/lib/maplibre/layers/CustomLayer.svelte b/src/lib/maplibre/layers/CustomLayer.svelte new file mode 100644 index 0000000..79fb22e --- /dev/null +++ b/src/lib/maplibre/layers/CustomLayer.svelte @@ -0,0 +1,84 @@ + + +{@render children?.()} diff --git a/src/lib/maplibre/layers/FillExtrusionLayer.svelte b/src/lib/maplibre/layers/FillExtrusionLayer.svelte index f1a8fec..b45d1b1 100644 --- a/src/lib/maplibre/layers/FillExtrusionLayer.svelte +++ b/src/lib/maplibre/layers/FillExtrusionLayer.svelte @@ -16,9 +16,9 @@ children?: Snippet; } - let { children, ...props }: Props = $props(); + let { children, sourceLayer, ...props }: Props = $props(); - + {@render children?.()} diff --git a/src/lib/maplibre/layers/FillLayer.svelte b/src/lib/maplibre/layers/FillLayer.svelte index 57eb300..ed68ec3 100644 --- a/src/lib/maplibre/layers/FillLayer.svelte +++ b/src/lib/maplibre/layers/FillLayer.svelte @@ -16,9 +16,9 @@ children?: Snippet; } - let { children, ...props }: Props = $props(); + let { children, sourceLayer, ...props }: Props = $props(); - + {@render children?.()} diff --git a/src/lib/maplibre/layers/HeatmapLayer.svelte b/src/lib/maplibre/layers/HeatmapLayer.svelte index 63cfc06..4dac626 100644 --- a/src/lib/maplibre/layers/HeatmapLayer.svelte +++ b/src/lib/maplibre/layers/HeatmapLayer.svelte @@ -16,9 +16,9 @@ children?: Snippet; } - let { children, ...props }: Props = $props(); + let { children, sourceLayer, ...props }: Props = $props(); - + {@render children?.()} diff --git a/src/lib/maplibre/layers/HillshadeLayer.svelte b/src/lib/maplibre/layers/HillshadeLayer.svelte index c98332e..299f37d 100644 --- a/src/lib/maplibre/layers/HillshadeLayer.svelte +++ b/src/lib/maplibre/layers/HillshadeLayer.svelte @@ -16,9 +16,9 @@ children?: Snippet; } - let { children, ...props }: Props = $props(); + let { children, sourceLayer, ...props }: Props = $props(); - + {@render children?.()} diff --git a/src/lib/maplibre/layers/LineLayer.svelte b/src/lib/maplibre/layers/LineLayer.svelte index ba6a9b7..0ff8b13 100644 --- a/src/lib/maplibre/layers/LineLayer.svelte +++ b/src/lib/maplibre/layers/LineLayer.svelte @@ -16,9 +16,9 @@ children?: Snippet; } - let { children, ...props }: Props = $props(); + let { children, sourceLayer, ...props }: Props = $props(); - + {@render children?.()} diff --git a/src/lib/maplibre/layers/RasterLayer.svelte b/src/lib/maplibre/layers/RasterLayer.svelte index a12ec0f..9adf616 100644 --- a/src/lib/maplibre/layers/RasterLayer.svelte +++ b/src/lib/maplibre/layers/RasterLayer.svelte @@ -16,9 +16,9 @@ children?: Snippet; } - let { children, ...props }: Props = $props(); + let { children, sourceLayer, ...props }: Props = $props(); - + {@render children?.()} diff --git a/src/lib/maplibre/layers/RawLayer.svelte b/src/lib/maplibre/layers/RawLayer.svelte index 631a477..eb76660 100644 --- a/src/lib/maplibre/layers/RawLayer.svelte +++ b/src/lib/maplibre/layers/RawLayer.svelte @@ -12,7 +12,7 @@ source?: string; beforeId?: string; filter?: maplibregl.FilterSpecification; - sourceLayer?: string; + 'source-layer'?: string; children?: Snippet; } @@ -24,7 +24,7 @@ paint, layout, filter, - sourceLayer, + 'source-layer': sourceLayer, maxzoom, minzoom, metadata, diff --git a/src/lib/maplibre/layers/SymbolLayer.svelte b/src/lib/maplibre/layers/SymbolLayer.svelte index c8da77b..60aedec 100644 --- a/src/lib/maplibre/layers/SymbolLayer.svelte +++ b/src/lib/maplibre/layers/SymbolLayer.svelte @@ -16,9 +16,9 @@ children?: Snippet; } - let { children, ...props }: Props = $props(); + let { children, sourceLayer, ...props }: Props = $props(); - + {@render children?.()} diff --git a/src/routes/components/+layout.svelte b/src/routes/components/+layout.svelte index 7716c76..2106114 100644 --- a/src/routes/components/+layout.svelte +++ b/src/routes/components/+layout.svelte @@ -4,11 +4,11 @@ let { children } = $props(); -
+
-
+
{@render children()}
diff --git a/src/routes/components/[slug]/+page.svelte b/src/routes/components/[slug]/+page.svelte index 6eb8a08..a8e3c0d 100644 --- a/src/routes/components/[slug]/+page.svelte +++ b/src/routes/components/[slug]/+page.svelte @@ -2,7 +2,7 @@ const { data } = $props(); -
+

{data.meta.title}

diff --git a/src/routes/components/[slug]/+page.ts b/src/routes/components/[slug]/+page.ts index 466ee91..c9f7758 100644 --- a/src/routes/components/[slug]/+page.ts +++ b/src/routes/components/[slug]/+page.ts @@ -1,29 +1,12 @@ import { error } from '@sveltejs/kit'; import type { Component } from 'svelte'; -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'; - export const load = async ({ params }) => { const { slug } = params; - const shiki = 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() - }); - try { const post = (await import(`$content/examples/${slug}/content.svelte.md`)) as { - default: Component<{ shiki: HighlighterCore }>; + default: Component; metadata: { title: string; description: string; @@ -31,8 +14,7 @@ export const load = async ({ params }) => { }; return { Content: post.default, - meta: { ...post.metadata, slug }, - shiki + meta: { ...post.metadata, slug } }; } catch { error(404, `Example '${slug}' not found`); diff --git a/src/routes/examples/+layout.svelte b/src/routes/examples/+layout.svelte index c4052d2..9e88ed0 100644 --- a/src/routes/examples/+layout.svelte +++ b/src/routes/examples/+layout.svelte @@ -4,11 +4,11 @@ let { children } = $props(); -
+
-
+
{@render children()}
diff --git a/src/routes/examples/[slug]/+page.svelte b/src/routes/examples/[slug]/+page.svelte index 6eb8a08..a8e3c0d 100644 --- a/src/routes/examples/[slug]/+page.svelte +++ b/src/routes/examples/[slug]/+page.svelte @@ -2,7 +2,7 @@ const { data } = $props(); -
+

{data.meta.title}

diff --git a/src/routes/examples/[slug]/+page.ts b/src/routes/examples/[slug]/+page.ts index 466ee91..c9f7758 100644 --- a/src/routes/examples/[slug]/+page.ts +++ b/src/routes/examples/[slug]/+page.ts @@ -1,29 +1,12 @@ import { error } from '@sveltejs/kit'; import type { Component } from 'svelte'; -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'; - export const load = async ({ params }) => { const { slug } = params; - const shiki = 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() - }); - try { const post = (await import(`$content/examples/${slug}/content.svelte.md`)) as { - default: Component<{ shiki: HighlighterCore }>; + default: Component; metadata: { title: string; description: string; @@ -31,8 +14,7 @@ export const load = async ({ params }) => { }; return { Content: post.default, - meta: { ...post.metadata, slug }, - shiki + meta: { ...post.metadata, slug } }; } catch { error(404, `Example '${slug}' not found`);