├── .node-version ├── .npmrc ├── src ├── routes │ ├── docs │ │ ├── +layout.ts │ │ ├── +page.svelte │ │ ├── components │ │ │ ├── +page.svelte │ │ │ ├── [slug] │ │ │ │ ├── +layout.svelte │ │ │ │ ├── +page.ts │ │ │ │ └── Prop.svelte │ │ │ └── components.json │ │ └── [slug] │ │ │ ├── +layout.svelte │ │ │ ├── +page.ts │ │ │ └── +page.svelte │ ├── examples │ │ ├── +layout.ts │ │ ├── +page.svelte │ │ └── [slug] │ │ │ ├── +layout.svelte │ │ │ ├── +page.ts │ │ │ └── +page.svelte │ ├── +layout.server.ts │ ├── ViewTransition.svelte │ ├── DarkModeSelector.svelte │ ├── +layout.svelte │ ├── sitemap.xml │ │ └── +server.ts │ ├── +page.svelte │ └── GlobalToc.svelte ├── lib │ ├── components │ │ ├── types.ts │ │ ├── ui │ │ │ ├── checkbox │ │ │ │ ├── index.ts │ │ │ │ └── checkbox.svelte │ │ │ ├── label │ │ │ │ ├── index.ts │ │ │ │ └── label.svelte │ │ │ ├── slider │ │ │ │ ├── index.ts │ │ │ │ └── slider.svelte │ │ │ ├── switch │ │ │ │ ├── index.ts │ │ │ │ └── switch.svelte │ │ │ ├── separator │ │ │ │ ├── index.ts │ │ │ │ └── separator.svelte │ │ │ ├── badge │ │ │ │ ├── index.ts │ │ │ │ └── badge.svelte │ │ │ ├── radio-group │ │ │ │ ├── index.ts │ │ │ │ ├── radio-group.svelte │ │ │ │ └── radio-group-item.svelte │ │ │ ├── select │ │ │ │ ├── select-group.svelte │ │ │ │ ├── select-group-heading.svelte │ │ │ │ ├── select-separator.svelte │ │ │ │ ├── select-label.svelte │ │ │ │ ├── select-scroll-up-button.svelte │ │ │ │ ├── select-scroll-down-button.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── select-item.svelte │ │ │ │ ├── select-trigger.svelte │ │ │ │ └── select-content.svelte │ │ │ ├── dropdown-menu │ │ │ │ ├── dropdown-menu-group.svelte │ │ │ │ ├── dropdown-menu-trigger.svelte │ │ │ │ ├── dropdown-menu-radio-group.svelte │ │ │ │ ├── dropdown-menu-separator.svelte │ │ │ │ ├── dropdown-menu-shortcut.svelte │ │ │ │ ├── dropdown-menu-label.svelte │ │ │ │ ├── dropdown-menu-group-heading.svelte │ │ │ │ ├── dropdown-menu-sub-content.svelte │ │ │ │ ├── dropdown-menu-sub-trigger.svelte │ │ │ │ ├── dropdown-menu-radio-item.svelte │ │ │ │ ├── dropdown-menu-content.svelte │ │ │ │ ├── dropdown-menu-item.svelte │ │ │ │ ├── dropdown-menu-checkbox-item.svelte │ │ │ │ └── index.ts │ │ │ ├── button │ │ │ │ └── index.ts │ │ │ ├── tabs │ │ │ │ ├── index.ts │ │ │ │ ├── tabs-content.svelte │ │ │ │ ├── tabs.svelte │ │ │ │ ├── tabs-list.svelte │ │ │ │ └── tabs-trigger.svelte │ │ │ ├── breadcrumb │ │ │ │ ├── breadcrumb.svelte │ │ │ │ ├── breadcrumb-item.svelte │ │ │ │ ├── breadcrumb-list.svelte │ │ │ │ ├── breadcrumb-page.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── breadcrumb-separator.svelte │ │ │ │ ├── breadcrumb-ellipsis.svelte │ │ │ │ └── breadcrumb-link.svelte │ │ │ └── table │ │ │ │ ├── table-header.svelte │ │ │ │ ├── table-body.svelte │ │ │ │ ├── table-caption.svelte │ │ │ │ ├── table-cell.svelte │ │ │ │ ├── table-footer.svelte │ │ │ │ ├── table-row.svelte │ │ │ │ ├── table-head.svelte │ │ │ │ ├── table.svelte │ │ │ │ └── index.ts │ │ └── Index.svelte │ ├── assets │ │ └── fonts │ │ │ ├── geist.woff2 │ │ │ ├── geist-mono.woff2 │ │ │ └── geist.css │ └── utils.ts ├── demo.spec.ts ├── content │ ├── docs │ │ ├── toc.ts │ │ └── quickstart │ │ │ ├── Marker.svelte │ │ │ ├── Simplest.svelte │ │ │ └── content.svelte.md │ ├── examples │ │ ├── fullscreen │ │ │ ├── Fullscreen.svelte │ │ │ └── content.svelte.md │ │ ├── cursor │ │ │ ├── content.svelte.md │ │ │ └── Cursor.svelte │ │ ├── complex │ │ │ └── content.svelte.md │ │ ├── plain │ │ │ ├── content.svelte.md │ │ │ └── Plain.svelte │ │ ├── query-features │ │ │ └── content.svelte.md │ │ ├── custom-control │ │ │ └── content.svelte.md │ │ ├── marker-popup │ │ │ ├── content.svelte.md │ │ │ └── MarkerAndPopup.svelte │ │ ├── custom-protocol │ │ │ ├── content.svelte.md │ │ │ └── CustomProtocol.svelte │ │ ├── terradraw │ │ │ └── content.svelte.md │ │ ├── basestyle │ │ │ └── content.svelte.md │ │ ├── deckgl-overlay │ │ │ ├── content.svelte.md │ │ │ └── DeckGL.svelte │ │ ├── geolocate │ │ │ ├── content.svelte.md │ │ │ └── Geolocate.svelte │ │ ├── video-on-a-map │ │ │ ├── content.svelte.md │ │ │ └── Video.svelte │ │ ├── side-by-side │ │ │ └── content.svelte.md │ │ ├── color-relief │ │ │ └── content.svelte.md │ │ ├── canvas-source │ │ │ ├── content.svelte.md │ │ │ ├── Circle.ts │ │ │ └── Canvas.svelte │ │ ├── globe-atmosphere │ │ │ ├── content.svelte.md │ │ │ └── Globe.svelte │ │ ├── pmtiles │ │ │ ├── content.svelte.md │ │ │ └── PMTiles.svelte │ │ ├── clusters │ │ │ └── content.svelte.md │ │ ├── image-loader │ │ │ └── content.svelte.md │ │ ├── terrain │ │ │ └── content.svelte.md │ │ ├── 3d-buildings │ │ │ ├── content.svelte.md │ │ │ └── Buildings3D.svelte │ │ ├── contour │ │ │ └── content.svelte.md │ │ ├── custom-layer │ │ │ └── content.svelte.md │ │ ├── dynamic-image │ │ │ ├── content.svelte.md │ │ │ └── DynamicImage.svelte │ │ ├── hover-styles │ │ │ ├── content.svelte.md │ │ │ └── HoverStyles.svelte │ │ ├── animate-images │ │ │ ├── content.svelte.md │ │ │ └── AnimateImages.svelte │ │ ├── global-state │ │ │ ├── content.svelte.md │ │ │ └── Plain.svelte │ │ ├── threejs-model │ │ │ └── content.svelte.md │ │ ├── 3d-extrusion-floorplan │ │ │ ├── content.svelte.md │ │ │ └── Floorplan.svelte │ │ ├── limit-interaction │ │ │ └── content.svelte.md │ │ └── toc.ts │ └── CodeBlock.svelte ├── app.d.ts └── app.html ├── static └── favicon.png ├── extensions ├── terradraw │ ├── src │ │ ├── lib │ │ │ ├── index.ts │ │ │ └── TerraDraw.svelte │ │ ├── app.d.ts │ │ └── app.html │ ├── CHANGELOG.md │ ├── svelte.config.js │ ├── tsconfig.json │ ├── vite.config.ts │ └── package.json ├── deckgl │ ├── src │ │ ├── lib │ │ │ └── index.ts │ │ ├── app.d.ts │ │ └── app.html │ ├── CHANGELOG.md │ ├── svelte.config.js │ ├── vite.config.ts │ ├── tsconfig.json │ └── package.json ├── pmtiles │ ├── src │ │ ├── lib │ │ │ ├── index.ts │ │ │ └── PMTilesProtocol.svelte │ │ ├── app.d.ts │ │ └── app.html │ ├── CHANGELOG.md │ ├── svelte.config.js │ ├── tsconfig.json │ ├── vite.config.ts │ └── package.json └── contour │ ├── src │ ├── lib │ │ └── index.ts │ ├── app.d.ts │ └── app.html │ ├── CHANGELOG.md │ ├── svelte.config.js │ ├── tsconfig.json │ ├── vite.config.ts │ └── package.json ├── svelte-maplibre-gl ├── src │ ├── lib │ │ ├── types.ts │ │ ├── layers │ │ │ ├── common.ts │ │ │ ├── BackgroundLayer.svelte │ │ │ ├── FillLayer.svelte │ │ │ ├── LineLayer.svelte │ │ │ ├── CircleLayer.svelte │ │ │ ├── RasterLayer.svelte │ │ │ ├── SymbolLayer.svelte │ │ │ ├── HeatmapLayer.svelte │ │ │ ├── HillshadeLayer.svelte │ │ │ ├── ColorReliefLayer.svelte │ │ │ └── FillExtrusionLayer.svelte │ │ ├── global │ │ │ └── Protocol.svelte │ │ ├── map │ │ │ ├── Sprite.svelte │ │ │ ├── Light.svelte │ │ │ ├── Sky.svelte │ │ │ ├── Projection.svelte │ │ │ ├── Terrain.svelte │ │ │ └── Image.svelte │ │ ├── sources │ │ │ ├── CanvasSource.svelte │ │ │ ├── ImageSource.svelte │ │ │ ├── VideoSource.svelte │ │ │ ├── GeoJSONSource.svelte │ │ │ ├── RasterTileSource.svelte │ │ │ ├── VectorTileSource.svelte │ │ │ ├── RasterDEMTileSource.svelte │ │ │ └── FeatureState.svelte │ │ ├── controls │ │ │ ├── Hash.svelte │ │ │ ├── GlobeControl.svelte │ │ │ ├── LogoControl.svelte │ │ │ ├── ScaleControl.svelte │ │ │ ├── NavigationControl.svelte │ │ │ ├── AttributionControl.svelte │ │ │ ├── TerrainControl.svelte │ │ │ ├── CustomControl.svelte │ │ │ └── FullScreenControl.svelte │ │ ├── utilities │ │ │ ├── QueryRenderedFeatures.svelte │ │ │ └── QuerySourceFeatures.svelte │ │ └── utils.ts │ ├── app.d.ts │ └── app.html ├── vite.config.ts ├── CHANGELOG.md ├── svelte.config.js ├── tsconfig.json └── package.json ├── e2e └── demo.test.ts ├── .prettierignore ├── playwright.config.ts ├── wrangler.jsonc ├── .github ├── pull_request_template.md └── workflows │ ├── lint.yml │ ├── preview.yml │ └── release.yml ├── .gitignore ├── components.json ├── .changeset ├── config.json └── README.md ├── .prettierrc ├── tsconfig.json ├── turbo.json ├── vite.config.ts ├── pnpm-workspace.yaml ├── eslint.config.js ├── LICENSE-MIT.txt ├── svelte.config.js └── README.md /.node-version: -------------------------------------------------------------------------------- 1 | 22.17 -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true -------------------------------------------------------------------------------- /src/routes/docs/+layout.ts: -------------------------------------------------------------------------------- 1 | export const prerender = true; 2 | -------------------------------------------------------------------------------- /src/routes/examples/+layout.ts: -------------------------------------------------------------------------------- 1 | export const prerender = true; 2 | -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MIERUNE/svelte-maplibre-gl/HEAD/static/favicon.png -------------------------------------------------------------------------------- /extensions/terradraw/src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export { default as TerraDraw } from './TerraDraw.svelte'; 2 | -------------------------------------------------------------------------------- /extensions/deckgl/src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export { default as DeckGLOverlay } from './DeckGLOverlay.svelte'; 2 | -------------------------------------------------------------------------------- /extensions/pmtiles/src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export { default as PMTilesProtocol } from './PMTilesProtocol.svelte'; 2 | -------------------------------------------------------------------------------- /src/lib/components/types.ts: -------------------------------------------------------------------------------- 1 | export type Toc = { 2 | title: string; 3 | items: Record; 4 | }[]; 5 | -------------------------------------------------------------------------------- /extensions/contour/src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export { default as MapLibreContourSource } from './MapLibreContourSource.svelte'; 2 | -------------------------------------------------------------------------------- /src/lib/assets/fonts/geist.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MIERUNE/svelte-maplibre-gl/HEAD/src/lib/assets/fonts/geist.woff2 -------------------------------------------------------------------------------- /src/lib/assets/fonts/geist-mono.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MIERUNE/svelte-maplibre-gl/HEAD/src/lib/assets/fonts/geist-mono.woff2 -------------------------------------------------------------------------------- /src/lib/components/ui/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | import Root from "./checkbox.svelte"; 2 | export { 3 | Root, 4 | // 5 | Root as Checkbox, 6 | }; 7 | -------------------------------------------------------------------------------- /src/lib/components/ui/label/index.ts: -------------------------------------------------------------------------------- 1 | import Root from "./label.svelte"; 2 | 3 | export { 4 | Root, 5 | // 6 | Root as Label, 7 | }; 8 | -------------------------------------------------------------------------------- /src/lib/components/ui/slider/index.ts: -------------------------------------------------------------------------------- 1 | import Root from "./slider.svelte"; 2 | 3 | export { 4 | Root, 5 | // 6 | Root as Slider, 7 | }; 8 | -------------------------------------------------------------------------------- /src/lib/components/ui/switch/index.ts: -------------------------------------------------------------------------------- 1 | import Root from "./switch.svelte"; 2 | 3 | export { 4 | Root, 5 | // 6 | Root as Switch, 7 | }; 8 | -------------------------------------------------------------------------------- /src/lib/components/ui/separator/index.ts: -------------------------------------------------------------------------------- 1 | import Root from "./separator.svelte"; 2 | 3 | export { 4 | Root, 5 | // 6 | Root as Separator, 7 | }; 8 | -------------------------------------------------------------------------------- /src/lib/components/ui/badge/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Badge } from "./badge.svelte"; 2 | export { badgeVariants, type BadgeVariant } from "./badge.svelte"; 3 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/types.ts: -------------------------------------------------------------------------------- 1 | export type Listener = (event: T) => void; 2 | 3 | export type Event = { 4 | type: N; 5 | target: T; 6 | }; 7 | -------------------------------------------------------------------------------- /src/routes/+layout.server.ts: -------------------------------------------------------------------------------- 1 | // export async function load({ setHeaders }) { 2 | // setHeaders({ 'Cache-Control': 'max-age=300, stale-while-revalidate=300' }); 3 | // } 4 | -------------------------------------------------------------------------------- /src/demo.spec.ts: -------------------------------------------------------------------------------- 1 | import { describe, it, expect } from 'vitest'; 2 | 3 | describe('sum test', () => { 4 | it('adds 1 + 2 to equal 3', () => { 5 | expect(1 + 2).toBe(3); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vite'; 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()] 6 | }); 7 | -------------------------------------------------------------------------------- /e2e/demo.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, test } from '@playwright/test'; 2 | 3 | test('home page has expected h1', async ({ page }) => { 4 | await page.goto('/'); 5 | await expect(page.locator('h1')).toBeVisible(); 6 | }); 7 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Package Managers 2 | package-lock.json 3 | pnpm-lock.yaml 4 | yarn.lock 5 | 6 | **/dist/ 7 | **/.svelte-kit/ 8 | 9 | # shadcn-svelte 10 | src/lib/components/ui/** 11 | 12 | .github/*.md 13 | /README.md -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/layers/common.ts: -------------------------------------------------------------------------------- 1 | import maplibregl from 'maplibre-gl'; 2 | 3 | export type MapLayerEventProps = { 4 | [K in keyof maplibregl.MapLayerEventType as `on${K}`]?: (ev: maplibregl.MapLayerEventType[K]) => void; 5 | }; 6 | -------------------------------------------------------------------------------- /playwright.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from '@playwright/test'; 2 | 3 | export default defineConfig({ 4 | webServer: { 5 | command: 'npm run build && npm run preview', 6 | port: 4173 7 | }, 8 | 9 | testDir: 'e2e' 10 | }); 11 | -------------------------------------------------------------------------------- /src/lib/components/ui/radio-group/index.ts: -------------------------------------------------------------------------------- 1 | import Root from "./radio-group.svelte"; 2 | import Item from "./radio-group-item.svelte"; 3 | 4 | export { 5 | Root, 6 | Item, 7 | // 8 | Root as RadioGroup, 9 | Item as RadioGroupItem, 10 | }; 11 | -------------------------------------------------------------------------------- /wrangler.jsonc: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-maplibre-gl", 3 | "main": ".svelte-kit/cloudflare/_worker.js", 4 | "compatibility_date": "2025-05-30", 5 | "assets": { 6 | "binding": "ASSETS", 7 | "directory": ".svelte-kit/cloudflare" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/content/docs/toc.ts: -------------------------------------------------------------------------------- 1 | import type { Toc } from '$lib/components/types'; 2 | 3 | export const toc: Toc = [ 4 | { 5 | title: 'Overview', 6 | items: { 7 | '/docs/quickstart': 'Quickstart' 8 | // '/docs/Concept': 'Concept', 9 | } 10 | } 11 | ]; 12 | -------------------------------------------------------------------------------- /src/routes/docs/+page.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 | 9 |
10 | -------------------------------------------------------------------------------- /src/lib/assets/fonts/geist.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Geist'; 3 | src: url('./geist.woff2') format('woff2'); 4 | font-display: swap; 5 | } 6 | @font-face { 7 | font-family: 'Geist Mono'; 8 | src: url('./geist-mono.woff2') format('woff2'); 9 | font-display: swap; 10 | } 11 | -------------------------------------------------------------------------------- /src/routes/examples/+page.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 | 9 |
10 | -------------------------------------------------------------------------------- /src/lib/components/ui/select/select-group.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/routes/docs/components/+page.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 | 9 |
10 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # svelte-maplibre-gl 2 | 3 | ## 1.0.2 4 | 5 | ### Patch Changes 6 | 7 | - 608c2b5: Fix: add missing source prop to CircleLayer 8 | 9 | ## 1.0.1 10 | 11 | ### Patch Changes 12 | 13 | - a5cc3ef: Fix: GeolocationControl causes infinite $effect loop with latest Svelte 14 | -------------------------------------------------------------------------------- /extensions/contour/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @svelte-maplibre-gl/contour 2 | 3 | ## 1.0.2 4 | 5 | ### Patch Changes 6 | 7 | - Updated dependencies [608c2b5] 8 | - svelte-maplibre-gl@1.0.2 9 | 10 | ## 1.0.1 11 | 12 | ### Patch Changes 13 | 14 | - Updated dependencies [a5cc3ef] 15 | - svelte-maplibre-gl@1.0.1 16 | -------------------------------------------------------------------------------- /extensions/deckgl/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @svelte-maplibre-gl/deckgl 2 | 3 | ## 1.0.2 4 | 5 | ### Patch Changes 6 | 7 | - Updated dependencies [608c2b5] 8 | - svelte-maplibre-gl@1.0.2 9 | 10 | ## 1.0.1 11 | 12 | ### Patch Changes 13 | 14 | - Updated dependencies [a5cc3ef] 15 | - svelte-maplibre-gl@1.0.1 16 | -------------------------------------------------------------------------------- /extensions/pmtiles/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @svelte-maplibre-gl/pmtiles 2 | 3 | ## 1.0.2 4 | 5 | ### Patch Changes 6 | 7 | - Updated dependencies [608c2b5] 8 | - svelte-maplibre-gl@1.0.2 9 | 10 | ## 1.0.1 11 | 12 | ### Patch Changes 13 | 14 | - Updated dependencies [a5cc3ef] 15 | - svelte-maplibre-gl@1.0.1 16 | -------------------------------------------------------------------------------- /extensions/terradraw/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @svelte-maplibre-gl/terradraw 2 | 3 | ## 1.0.2 4 | 5 | ### Patch Changes 6 | 7 | - Updated dependencies [608c2b5] 8 | - svelte-maplibre-gl@1.0.2 9 | 10 | ## 1.0.1 11 | 12 | ### Patch Changes 13 | 14 | - Updated dependencies [a5cc3ef] 15 | - svelte-maplibre-gl@1.0.1 16 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 2 | 3 | /** @type {import('@sveltejs/kit').Config} */ 4 | const config = { 5 | preprocess: vitePreprocess(), 6 | kit: { 7 | // No adapter needed for library packages 8 | } 9 | }; 10 | 11 | export default config; 12 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | Close #0 4 | 5 | ### What I did 6 | 7 | 8 | - 9 | 10 | ### Notes 11 | 12 | 13 | None 14 | -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://svelte.dev/docs/kit/types#app.d.ts 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /extensions/contour/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://svelte.dev/docs/kit/types#app.d.ts 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /extensions/contour/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | %sveltekit.head% 7 | 8 | 9 |
%sveltekit.body%
10 | 11 | 12 | -------------------------------------------------------------------------------- /extensions/deckgl/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://svelte.dev/docs/kit/types#app.d.ts 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /extensions/deckgl/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | %sveltekit.head% 7 | 8 | 9 |
%sveltekit.body%
10 | 11 | 12 | -------------------------------------------------------------------------------- /extensions/pmtiles/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://svelte.dev/docs/kit/types#app.d.ts 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /extensions/pmtiles/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | %sveltekit.head% 7 | 8 | 9 |
%sveltekit.body%
10 | 11 | 12 | -------------------------------------------------------------------------------- /extensions/terradraw/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://svelte.dev/docs/kit/types#app.d.ts 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /src/content/docs/quickstart/Marker.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://svelte.dev/docs/kit/types#app.d.ts 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | %sveltekit.head% 7 | 8 | 9 |
%sveltekit.body%
10 | 11 | 12 | -------------------------------------------------------------------------------- /extensions/terradraw/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | %sveltekit.head% 7 | 8 | 9 |
%sveltekit.body%
10 | 11 | 12 | -------------------------------------------------------------------------------- /src/content/docs/quickstart/Simplest.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/lib/components/ui/button/index.ts: -------------------------------------------------------------------------------- 1 | import Root, { 2 | type ButtonProps, 3 | type ButtonSize, 4 | type ButtonVariant, 5 | buttonVariants, 6 | } from "./button.svelte"; 7 | 8 | export { 9 | Root, 10 | type ButtonProps as Props, 11 | // 12 | Root as Button, 13 | buttonVariants, 14 | type ButtonProps, 15 | type ButtonSize, 16 | type ButtonVariant, 17 | }; 18 | -------------------------------------------------------------------------------- /src/content/examples/fullscreen/Fullscreen.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "moduleResolution": "bundler" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/lib/components/ui/tabs/index.ts: -------------------------------------------------------------------------------- 1 | import Root from "./tabs.svelte"; 2 | import Content from "./tabs-content.svelte"; 3 | import List from "./tabs-list.svelte"; 4 | import Trigger from "./tabs-trigger.svelte"; 5 | 6 | export { 7 | Root, 8 | Content, 9 | List, 10 | Trigger, 11 | // 12 | Root as Tabs, 13 | Content as TabsContent, 14 | List as TabsList, 15 | Trigger as TabsTrigger, 16 | }; 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | test-results 2 | node_modules 3 | 4 | # Output 5 | .output 6 | .vercel 7 | **/.svelte-kit/ 8 | **/dist/ 9 | /build 10 | .turbo 11 | 12 | # OS 13 | .DS_Store 14 | Thumbs.db 15 | 16 | # Env 17 | .env 18 | .env.* 19 | !.env.example 20 | !.env.test 21 | 22 | # Vite 23 | vite.config.js.timestamp-* 24 | vite.config.ts.timestamp-* 25 | 26 | # ignore npm lockfile 27 | package-lock.json 28 | 29 | .wrangler -------------------------------------------------------------------------------- /src/routes/ViewTransition.svelte: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /src/content/examples/cursor/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Change Cursor 3 | description: Change the cursor style on hover 4 | --- 5 | 6 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/global/Protocol.svelte: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /src/content/examples/complex/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Complex 3 | description: A showcase of various reactive features. 4 | --- 5 | 6 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/content/examples/plain/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plain Map 3 | description: A minimal example showing only the base map. 4 | --- 5 | 6 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://next.shadcn-svelte.com/schema.json", 3 | "tailwind": { 4 | "css": "src/app.css", 5 | "baseColor": "slate" 6 | }, 7 | "aliases": { 8 | "components": "$lib/components", 9 | "utils": "$lib/utils", 10 | "ui": "$lib/components/ui", 11 | "hooks": "$lib/hooks", 12 | "lib": "$lib" 13 | }, 14 | "typescript": true, 15 | "registry": "https://next.shadcn-svelte.com/registry" 16 | } 17 | -------------------------------------------------------------------------------- /src/content/examples/plain/Plain.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/content/examples/query-features/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Query Features 3 | description: Query source and rendered features to place markers and display a list. 4 | --- 5 | 6 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 17 | -------------------------------------------------------------------------------- /src/lib/components/ui/tabs/tabs-content.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 18 | -------------------------------------------------------------------------------- /extensions/contour/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 2 | 3 | /** @type {import('@sveltejs/kit').Config} */ 4 | const config = { 5 | // Consult https://svelte.dev/docs/kit/integrations 6 | // for more information about preprocessors 7 | preprocess: vitePreprocess(), 8 | 9 | kit: { 10 | // Since this is a library package, we don't need an adapter 11 | adapter: undefined 12 | } 13 | }; 14 | 15 | export default config; 16 | -------------------------------------------------------------------------------- /extensions/deckgl/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 2 | 3 | /** @type {import('@sveltejs/kit').Config} */ 4 | const config = { 5 | // Consult https://svelte.dev/docs/kit/integrations 6 | // for more information about preprocessors 7 | preprocess: vitePreprocess(), 8 | 9 | kit: { 10 | // Since this is a library package, we don't need an adapter 11 | adapter: undefined 12 | } 13 | }; 14 | 15 | export default config; 16 | -------------------------------------------------------------------------------- /extensions/pmtiles/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 2 | 3 | /** @type {import('@sveltejs/kit').Config} */ 4 | const config = { 5 | // Consult https://svelte.dev/docs/kit/integrations 6 | // for more information about preprocessors 7 | preprocess: vitePreprocess(), 8 | 9 | kit: { 10 | // Since this is a library package, we don't need an adapter 11 | adapter: undefined 12 | } 13 | }; 14 | 15 | export default config; 16 | -------------------------------------------------------------------------------- /extensions/terradraw/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 2 | 3 | /** @type {import('@sveltejs/kit').Config} */ 4 | const config = { 5 | // Consult https://svelte.dev/docs/kit/integrations 6 | // for more information about preprocessors 7 | preprocess: vitePreprocess(), 8 | 9 | kit: { 10 | // Since this is a library package, we don't need an adapter 11 | adapter: undefined 12 | } 13 | }; 14 | 15 | export default config; 16 | -------------------------------------------------------------------------------- /src/content/examples/custom-control/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Custom Control 3 | description: Easily create user-defined controls with a native look and feel. 4 | --- 5 | 6 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/content/examples/marker-popup/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Marker and Popup 3 | description: Control marker and popup states using Svelte’s reactivity. 4 | --- 5 | 6 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [["svelte-maplibre-gl", "@svelte-maplibre-gl/*"]], 7 | "access": "public", 8 | "baseBranch": "main", 9 | "updateInternalDependencies": "patch", 10 | "ignore": ["@svelte-maplibre-gl/docs"], 11 | "privatePackages": { 12 | "version": false, 13 | "tag": false 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/lib/components/ui/select/select-group-heading.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | -------------------------------------------------------------------------------- /src/content/examples/custom-protocol/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Custom Protocols 3 | description: Add a custom resource loading function to handle a custom URL scheme. 4 | --- 5 | 6 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/content/examples/terradraw/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Terra Draw 3 | description: Use Terra Draw to draw a geometry in various forms such as point, line or polygon on your map. 4 | --- 5 | 6 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/content/examples/basestyle/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Change Base Style 3 | description: This library efficiently preserves dynamic user contents even when the base style changes. 4 | --- 5 | 6 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/content/examples/deckgl-overlay/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: deck.gl Overlay 3 | description: Interleaving deck.gl with MapLibre layers 4 | original: https://deck.gl/gallery/maplibre-overlay 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/content/examples/fullscreen/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Fullscreen 3 | description: View a fullscreen map 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/fullscreen/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/content/examples/geolocate/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Locate the User 3 | description: Locate the User 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/locate-user/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/content/examples/video-on-a-map/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Video on a map 3 | description: Display a video. 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/video-on-a-map/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/lib/components/ui/tabs/tabs.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 20 | -------------------------------------------------------------------------------- /src/content/examples/side-by-side/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Side by Side 3 | description: Synchronize two maps. 4 | original: https://visgl.github.io/react-map-gl/examples/side-by-side 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 120, 6 | "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], 7 | "overrides": [ 8 | { 9 | "files": "*.svelte", 10 | "options": { 11 | "parser": "svelte" 12 | } 13 | }, 14 | { 15 | "files": ["*.svx", "*.svelte.md", "*.md"], 16 | "options": { 17 | "parser": "markdown" 18 | } 19 | } 20 | ], 21 | "tailwindStylesheet": "./src/app.css" 22 | } 23 | -------------------------------------------------------------------------------- /src/content/examples/color-relief/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Color Relief 3 | description: Render hypsometric tints using DEM sources 4 | original: https://nathanmolson.github.io/color_relief/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/content/examples/canvas-source/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Canvas Source 3 | description: Add a canvas source to the map. 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/canvas-source/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/content/examples/globe-atmosphere/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Globe with an atmosphere 3 | description: Display a globe with an atmosphere. 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/globe-atmosphere/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/content/examples/pmtiles/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: PMTiles Protocol 3 | description: Uses the PMTiles plugin and protocol to present a map. 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/pmtiles/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/content/examples/clusters/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Clusters 3 | description: Use MapLibre's built-in functions to visualize points as clusters. 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/cluster/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/content/examples/image-loader/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Load Images from URLs 3 | description: Utility for loading images from URLs 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/add-image-stretchable/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/content/examples/terrain/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 3D Terrain and Sky 3 | description: Show elevation in actual 3D with the sky. 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/sky-with-fog-and-terrain/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/lib/components/ui/radio-group/radio-group.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 20 | -------------------------------------------------------------------------------- /src/content/examples/3d-buildings/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 3D Buildings 3 | description: Use extrusions to display buildings' height in 3D. 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/3d-buildings/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/content/examples/contour/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Contour Lines 3 | description: Render contour lines from a raster DEM source using maplibre-contour 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/contour-lines/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 18 | -------------------------------------------------------------------------------- /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /src/content/examples/custom-layer/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Custom Layer 3 | description: Use a custom layer to draw simple WebGL content on a globe. 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/globe-custom-simple/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/content/examples/dynamic-image/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dynamic Image 3 | description: Add an icon to the map that was generated at runtime. 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/add-image-generated/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/content/examples/hover-styles/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Hover Styles 3 | description: Use events and feature states to create a per feature hover effect. 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/hover-styles/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | // "module": "NodeNext", 13 | "moduleResolution": "bundler", 14 | "types": ["vite-plugin-svelte-docgen"] 15 | }, 16 | "exclude": ["node_modules", "dist", "**/dist", "extensions/*/dist", "svelte-maplibre-gl/dist"] 17 | } 18 | -------------------------------------------------------------------------------- /src/content/examples/animate-images/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Animate a series of images 3 | description: Use a series of image sources to create an animation. 4 | orignal: https://maplibre.org/maplibre-gl-js/docs/examples/animate-images/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/lib/components/ui/breadcrumb/breadcrumb.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | -------------------------------------------------------------------------------- /src/lib/components/ui/tabs/tabs-list.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | -------------------------------------------------------------------------------- /src/routes/docs/[slug]/+layout.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | 12 |
13 | {@render children()} 14 |
15 |
16 | -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turbo.build/schema.json", 3 | "extends": ["//"], 4 | "ui": "tui", 5 | "tasks": { 6 | "build": { 7 | "dependsOn": ["^build"], 8 | "outputs": ["dist/**", ".svelte-kit/**"], 9 | "cache": true 10 | }, 11 | "prepack": { 12 | "dependsOn": ["^prepack"], 13 | "outputs": ["dist/**"], 14 | "cache": true 15 | }, 16 | "check": { 17 | "dependsOn": ["^build", "^check"] 18 | }, 19 | "check:watch": {}, 20 | "lint": {}, 21 | "test": {}, 22 | "test:e2e": {}, 23 | "preview": {} 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/content/examples/global-state/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Global State 3 | description: Filter a layer symbols based on user input using setGlobalStateProperty(). 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/filter-symbols-using-global-state/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/content/examples/threejs-model/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 3D model with three.js 3 | description: Use a custom style layer with three.js to add a 3D model to the map. 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/globe-3d-model/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/content/examples/3d-extrusion-floorplan/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 3D Floor Plan 3 | description: Create a 3D indoor map with the fill-extrude-height paint property. 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/3d-extrusion-floorplan/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/lib/components/ui/breadcrumb/breadcrumb-item.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
  • 19 | {@render children?.()} 20 |
    • 21 | -------------------------------------------------------------------------------- /src/lib/components/ui/table/table-header.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 19 | {@render children?.()} 20 | 21 | -------------------------------------------------------------------------------- /src/routes/examples/[slug]/+layout.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
    9 | 12 |
    13 | {@render children()} 14 |
    15 |
    16 | -------------------------------------------------------------------------------- /src/lib/components/ui/select/select-separator.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 19 | -------------------------------------------------------------------------------- /src/lib/components/ui/table/table-body.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 19 | {@render children?.()} 20 | 21 | -------------------------------------------------------------------------------- /src/content/examples/limit-interaction/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Limit Map Interactions 3 | description: Set the zoom/pitch range and toggle UI handlers on the map. 4 | original: https://maplibre.org/maplibre-gl-js/docs/examples/toggle-interaction-handlers/ 5 | --- 6 | 7 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/lib/components/ui/table/table-caption.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 19 | {@render children?.()} 20 | 21 | -------------------------------------------------------------------------------- /src/routes/docs/components/[slug]/+layout.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
    9 | 12 |
    13 | {@render children()} 14 |
    15 |
    16 | -------------------------------------------------------------------------------- /src/lib/components/ui/select/select-label.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
    19 | {@render children?.()} 20 |
    21 | -------------------------------------------------------------------------------- /src/lib/components/ui/table/table-cell.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 19 | {@render children?.()} 20 | 21 | -------------------------------------------------------------------------------- /src/lib/components/ui/table/table-footer.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | tr]:last:border-b-0", className)} 17 | {...restProps} 18 | > 19 | {@render children?.()} 20 | 21 | -------------------------------------------------------------------------------- /extensions/deckgl/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import { svelte } from '@sveltejs/vite-plugin-svelte'; 3 | 4 | export default defineConfig({ 5 | plugins: [svelte()], 6 | 7 | build: { 8 | lib: { 9 | entry: './src/lib/index.ts', 10 | name: 'SvelteMaplibreDeckGL', 11 | fileName: 'index' 12 | }, 13 | rollupOptions: { 14 | external: ['svelte', 'maplibre-gl', '@deck.gl/mapbox'], 15 | output: { 16 | globals: { 17 | svelte: 'Svelte', 18 | 'maplibre-gl': 'maplibregl', 19 | '@deck.gl/mapbox': 'DeckGLMapbox' 20 | } 21 | } 22 | } 23 | } 24 | }); 25 | -------------------------------------------------------------------------------- /src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 19 | {@render children?.()} 20 | 21 | -------------------------------------------------------------------------------- /extensions/contour/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "moduleResolution": "bundler", 13 | "module": "ESNext", 14 | "target": "ES2020", 15 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 16 | "types": ["svelte"] 17 | }, 18 | "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 19 | "exclude": ["node_modules", "dist"] 20 | } 21 | -------------------------------------------------------------------------------- /extensions/deckgl/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "moduleResolution": "bundler", 13 | "module": "ESNext", 14 | "target": "ES2020", 15 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 16 | "types": ["svelte"] 17 | }, 18 | "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 19 | "exclude": ["node_modules", "dist"] 20 | } 21 | -------------------------------------------------------------------------------- /extensions/pmtiles/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "moduleResolution": "bundler", 13 | "module": "ESNext", 14 | "target": "ES2020", 15 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 16 | "types": ["svelte"] 17 | }, 18 | "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 19 | "exclude": ["node_modules", "dist"] 20 | } 21 | -------------------------------------------------------------------------------- /extensions/terradraw/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "moduleResolution": "bundler", 13 | "module": "ESNext", 14 | "target": "ES2020", 15 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 16 | "types": ["svelte"] 17 | }, 18 | "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 19 | "exclude": ["node_modules", "dist"] 20 | } 21 | -------------------------------------------------------------------------------- /src/lib/components/ui/table/table-row.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | {@render children?.()} 23 | 24 | -------------------------------------------------------------------------------- /src/lib/components/ui/separator/separator.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | -------------------------------------------------------------------------------- /src/lib/components/ui/breadcrumb/breadcrumb-list.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
      22 | {@render children?.()} 23 |
    24 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import tailwindcss from '@tailwindcss/vite'; 3 | import { searchForWorkspaceRoot } from 'vite'; 4 | import svelteDocgenPlugin from 'vite-plugin-svelte-docgen'; 5 | import { defineConfig } from 'vitest/config'; 6 | 7 | export default defineConfig({ 8 | plugins: [svelteDocgenPlugin(), tailwindcss(), sveltekit()], 9 | 10 | server: { 11 | fs: { 12 | allow: [searchForWorkspaceRoot(process.cwd())] 13 | } 14 | }, 15 | 16 | resolve: { 17 | alias: { 18 | path: 'pathe' 19 | } 20 | }, 21 | 22 | test: { 23 | include: ['src/**/*.{test,spec}.{js,ts}'] 24 | } 25 | }); 26 | -------------------------------------------------------------------------------- /extensions/contour/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import { svelte } from '@sveltejs/vite-plugin-svelte'; 3 | 4 | export default defineConfig({ 5 | plugins: [svelte()], 6 | 7 | build: { 8 | lib: { 9 | entry: './src/lib/index.ts', 10 | name: 'SvelteMaplibreContour', 11 | fileName: 'index' 12 | }, 13 | rollupOptions: { 14 | external: ['svelte', 'maplibre-gl', '@watergis/maplibre-gl-terradraw'], 15 | output: { 16 | globals: { 17 | svelte: 'Svelte', 18 | 'maplibre-gl': 'maplibregl', 19 | '@watergis/maplibre-gl-terradraw': 'MaplibreContour' 20 | } 21 | } 22 | } 23 | } 24 | }); 25 | -------------------------------------------------------------------------------- /src/lib/components/ui/breadcrumb/breadcrumb-page.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | {@render children?.()} 23 | 24 | -------------------------------------------------------------------------------- /src/lib/components/ui/table/table-head.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | {@render children?.()} 23 | 24 | -------------------------------------------------------------------------------- /src/lib/components/ui/table/table.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
    14 | 20 | {@render children?.()} 21 |
    22 |
    23 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/map/Sprite.svelte: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /src/lib/components/ui/label/label.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | -------------------------------------------------------------------------------- /extensions/pmtiles/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import { svelte } from '@sveltejs/vite-plugin-svelte'; 3 | 4 | export default defineConfig({ 5 | plugins: [svelte()], 6 | 7 | build: { 8 | lib: { 9 | entry: './src/lib/index.ts', 10 | name: 'SvelteMaplibrePMTiles', 11 | fileName: 'index' 12 | }, 13 | rollupOptions: { 14 | external: ['svelte', 'maplibre-gl', 'pmtiles', 'svelte-maplibre-gl'], 15 | output: { 16 | globals: { 17 | svelte: 'Svelte', 18 | 'maplibre-gl': 'maplibregl', 19 | pmtiles: 'pmtiles', 20 | 'svelte-maplibre-gl': 'SvelteMaplibreGL' 21 | } 22 | } 23 | } 24 | } 25 | }); 26 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/sources/CanvasSource.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | {@render children?.()} 18 | 19 | -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: Lint 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | 9 | jobs: 10 | lint: 11 | runs-on: ubuntu-latest 12 | permissions: 13 | contents: read 14 | steps: 15 | - uses: actions/checkout@v4 16 | 17 | - run: npm i -g --force corepack && corepack enable 18 | 19 | - uses: actions/setup-node@v4 20 | with: 21 | node-version: 22 22 | cache: 'pnpm' 23 | 24 | - name: Install dependencies 25 | run: pnpm install 26 | 27 | - name: Svelte check 28 | run: pnpm run check:all 29 | 30 | - name: Lint 31 | run: pnpm run lint 32 | -------------------------------------------------------------------------------- /src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 |
    23 | {@render children?.()} 24 |
    25 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from 'clsx'; 2 | import { twMerge } from 'tailwind-merge'; 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)); 6 | } 7 | 8 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 9 | export type WithoutChild = T extends { child?: any } ? Omit : T; 10 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 11 | export type WithoutChildren = T extends { children?: any } ? Omit : T; 12 | export type WithoutChildrenOrChild = WithoutChildren>; 13 | export type WithElementRef = T & { ref?: U | null }; 14 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/controls/Hash.svelte: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/layers/BackgroundLayer.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | {@render children?.()} 20 | 21 | -------------------------------------------------------------------------------- /src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 23 | -------------------------------------------------------------------------------- /src/lib/components/ui/table/index.ts: -------------------------------------------------------------------------------- 1 | import Root from "./table.svelte"; 2 | import Body from "./table-body.svelte"; 3 | import Caption from "./table-caption.svelte"; 4 | import Cell from "./table-cell.svelte"; 5 | import Footer from "./table-footer.svelte"; 6 | import Head from "./table-head.svelte"; 7 | import Header from "./table-header.svelte"; 8 | import Row from "./table-row.svelte"; 9 | 10 | export { 11 | Root, 12 | Body, 13 | Caption, 14 | Cell, 15 | Footer, 16 | Head, 17 | Header, 18 | Row, 19 | // 20 | Root as Table, 21 | Body as TableBody, 22 | Caption as TableCaption, 23 | Cell as TableCell, 24 | Footer as TableFooter, 25 | Head as TableHead, 26 | Header as TableHeader, 27 | Row as TableRow, 28 | }; 29 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/sources/ImageSource.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | {@render children?.()} 19 | 20 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/sources/VideoSource.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | {@render children?.()} 19 | 20 | -------------------------------------------------------------------------------- /src/lib/components/ui/breadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | import Root from "./breadcrumb.svelte"; 2 | import Ellipsis from "./breadcrumb-ellipsis.svelte"; 3 | import Item from "./breadcrumb-item.svelte"; 4 | import Separator from "./breadcrumb-separator.svelte"; 5 | import Link from "./breadcrumb-link.svelte"; 6 | import List from "./breadcrumb-list.svelte"; 7 | import Page from "./breadcrumb-page.svelte"; 8 | 9 | export { 10 | Root, 11 | Ellipsis, 12 | Item, 13 | Separator, 14 | Link, 15 | List, 16 | Page, 17 | // 18 | Root as Breadcrumb, 19 | Ellipsis as BreadcrumbEllipsis, 20 | Item as BreadcrumbItem, 21 | Separator as BreadcrumbSeparator, 22 | Link as BreadcrumbLink, 23 | List as BreadcrumbList, 24 | Page as BreadcrumbPage, 25 | }; 26 | -------------------------------------------------------------------------------- /src/lib/components/ui/select/select-scroll-up-button.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/sources/GeoJSONSource.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | {@render children?.()} 19 | 20 | -------------------------------------------------------------------------------- /src/lib/components/ui/select/select-scroll-down-button.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/sources/RasterTileSource.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | {@render children?.()} 19 | 20 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/sources/VectorTileSource.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | {@render children?.()} 19 | 20 | -------------------------------------------------------------------------------- /src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 28 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/sources/RasterDEMTileSource.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | {@render children?.()} 19 | 20 | -------------------------------------------------------------------------------- /extensions/terradraw/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import { svelte } from '@sveltejs/vite-plugin-svelte'; 3 | 4 | export default defineConfig({ 5 | plugins: [svelte()], 6 | 7 | build: { 8 | lib: { 9 | entry: './src/lib/index.ts', 10 | name: 'SvelteMaplibreTerraDraw', 11 | fileName: 'index' 12 | }, 13 | rollupOptions: { 14 | external: ['svelte', 'maplibre-gl', 'terra-draw', 'terra-draw-maplibre-gl-adapter', 'svelte-maplibre-gl'], 15 | output: { 16 | globals: { 17 | svelte: 'Svelte', 18 | 'maplibre-gl': 'maplibregl', 19 | 'terra-draw': 'TerraDraw', 20 | 'terra-draw-maplibre-gl-adapter': 'TerraDrawMapLibreGLAdapter', 21 | 'svelte-maplibre-gl': 'SvelteMaplibreGL' 22 | } 23 | } 24 | } 25 | } 26 | }); 27 | -------------------------------------------------------------------------------- /src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 24 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'svelte-maplibre-gl' 3 | - 'extensions/*' 4 | - '.' 5 | 6 | catalog: 7 | # Core dependencies 8 | 'maplibre-gl': '^5.7.0' 9 | 'svelte': '^5.38.3' 10 | 11 | # Extension dependencies 12 | '@deck.gl/core': '^9.1.14' 13 | '@deck.gl/layers': '^9.1.14' 14 | '@deck.gl/mapbox': '^9.1.14' 15 | 'maplibre-contour': '^0.1.0' 16 | 'pmtiles': '^4.3.0' 17 | 'terra-draw': '^1.12.0' 18 | 'terra-draw-maplibre-gl-adapter': '^1.1.2' 19 | 20 | # Build tools 21 | '@sveltejs/kit': '^2.36.2' 22 | '@sveltejs/package': '^2.5.0' 23 | '@sveltejs/vite-plugin-svelte': '^6.1.0' 24 | 'publint': '^0.3.12' 25 | 'svelte-check': '^4.3.1' 26 | 'typescript': '^5.9.2' 27 | 'vite': '^6.3.6' 28 | 29 | # Types 30 | '@types/geojson': '^7946.0.16' 31 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 | 18 | 19 | 20 |
    %sveltekit.body%
    21 | 22 | 23 | -------------------------------------------------------------------------------- /src/content/examples/canvas-source/Circle.ts: -------------------------------------------------------------------------------- 1 | export class Circle { 2 | constructor( 3 | public x: number, 4 | public y: number, 5 | public dx: number, 6 | public dy: number, 7 | public radius: number, 8 | public color: string 9 | ) {} 10 | 11 | draw(ctx: CanvasRenderingContext2D) { 12 | ctx.beginPath(); 13 | ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); 14 | ctx.strokeStyle = this.color; 15 | ctx.stroke(); 16 | } 17 | 18 | update(ctx: CanvasRenderingContext2D) { 19 | if (this.x + this.radius > ctx.canvas.width || this.x - this.radius < 0) { 20 | this.dx = -this.dx; 21 | } 22 | if (this.y + this.radius > ctx.canvas.height || this.y - this.radius < 0) { 23 | this.dy = -this.dy; 24 | } 25 | this.x += this.dx; 26 | this.y += this.dy; 27 | 28 | this.draw(ctx); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/lib/components/Index.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/layers/FillLayer.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | {@render children?.()} 24 | 25 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/layers/LineLayer.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | {@render children?.()} 24 | 25 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/layers/CircleLayer.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | {@render children?.()} 24 | 25 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/layers/RasterLayer.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | {@render children?.()} 24 | 25 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/layers/SymbolLayer.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | {@render children?.()} 24 | 25 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/layers/HeatmapLayer.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | {@render children?.()} 24 | 25 | -------------------------------------------------------------------------------- /src/lib/components/ui/breadcrumb/breadcrumb-link.svelte: -------------------------------------------------------------------------------- 1 | 24 | 25 | {#if child} 26 | {@render child({ props: attrs })} 27 | {:else} 28 | 29 | {@render children?.()} 30 | 31 | {/if} 32 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/layers/HillshadeLayer.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | {@render children?.()} 24 | 25 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/map/Light.svelte: -------------------------------------------------------------------------------- 1 | 27 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/map/Sky.svelte: -------------------------------------------------------------------------------- 1 | 27 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/layers/ColorReliefLayer.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | {@render children?.()} 24 | 25 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/layers/FillExtrusionLayer.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | {@render children?.()} 24 | 25 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/controls/GlobeControl.svelte: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /.github/workflows/preview.yml: -------------------------------------------------------------------------------- 1 | name: Preview Release 2 | 3 | on: 4 | pull_request: 5 | 6 | jobs: 7 | preview-release: 8 | runs-on: ubuntu-latest 9 | permissions: 10 | contents: read 11 | steps: 12 | - uses: actions/checkout@v4 13 | - run: npm i -g --force corepack && corepack enable 14 | 15 | - uses: actions/setup-node@v4 16 | with: 17 | node-version: 22 18 | cache: 'pnpm' 19 | 20 | - name: Install dependencies 21 | run: pnpm install 22 | 23 | - name: Build packages 24 | run: pnpm build:packages 25 | 26 | - name: Publish packages preview with pkg-pr-new CLI 27 | run: | 28 | pnpx pkg-pr-new publish \ 29 | ./svelte-maplibre-gl \ 30 | ./extensions/contour \ 31 | ./extensions/deckgl \ 32 | ./extensions/pmtiles \ 33 | ./extensions/terradraw 34 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/controls/LogoControl.svelte: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /src/content/examples/geolocate/Geolocate.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |
    11 | 
    {logString}
    12 | 13 | log('trackuserlocationstart')} 19 | ontrackuserlocationend={() => log('trackuserlocationend')} 20 | ongeolocate={(ev) => log(`geolocate ${JSON.stringify(ev.coords, null, 2)}`)} 21 | /> 22 | 23 |
    24 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/controls/ScaleControl.svelte: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /src/content/examples/animate-images/AnimateImages.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 22 | 23 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/controls/NavigationControl.svelte: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import prettier from 'eslint-config-prettier'; 2 | import js from '@eslint/js'; 3 | import svelte from 'eslint-plugin-svelte'; 4 | import globals from 'globals'; 5 | import ts from 'typescript-eslint'; 6 | 7 | export default ts.config( 8 | js.configs.recommended, 9 | ...ts.configs.recommended, 10 | ...svelte.configs['flat/recommended'], 11 | prettier, 12 | ...svelte.configs['flat/prettier'], 13 | { 14 | languageOptions: { 15 | globals: { 16 | ...globals.browser, 17 | ...globals.node 18 | } 19 | } 20 | }, 21 | { 22 | files: ['**/*.svelte', '**/*.svelte.ts'], 23 | rules: { 24 | // surpress "Expected an assignment or function call and instead saw an expression" 25 | '@typescript-eslint/no-unused-expressions': 'off' 26 | // 'svelte/require-each-key': 'off' 27 | }, 28 | languageOptions: { 29 | parserOptions: { 30 | parser: ts.parser 31 | } 32 | } 33 | }, 34 | { 35 | ignores: ['**/build/', '**/.svelte-kit/', '**/dist/'] 36 | } 37 | ); 38 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/controls/AttributionControl.svelte: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /src/content/examples/3d-buildings/Buildings3D.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | =', ['get', 'zoom'], 14], ['get', 'render_min_height'], 0] 33 | }} 34 | /> 35 | 36 | -------------------------------------------------------------------------------- /src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | -------------------------------------------------------------------------------- /src/lib/components/ui/select/index.ts: -------------------------------------------------------------------------------- 1 | import { Select as SelectPrimitive } from "bits-ui"; 2 | 3 | import Group from "./select-group.svelte"; 4 | import Label from "./select-label.svelte"; 5 | import Item from "./select-item.svelte"; 6 | import Content from "./select-content.svelte"; 7 | import Trigger from "./select-trigger.svelte"; 8 | import Separator from "./select-separator.svelte"; 9 | import ScrollDownButton from "./select-scroll-down-button.svelte"; 10 | import ScrollUpButton from "./select-scroll-up-button.svelte"; 11 | 12 | const Root = SelectPrimitive.Root; 13 | 14 | export { 15 | Root, 16 | Group, 17 | Label, 18 | Item, 19 | Content, 20 | Trigger, 21 | Separator, 22 | ScrollDownButton, 23 | ScrollUpButton, 24 | // 25 | Root as Select, 26 | Group as SelectGroup, 27 | Label as SelectLabel, 28 | Item as SelectItem, 29 | Content as SelectContent, 30 | Trigger as SelectTrigger, 31 | Separator as SelectSeparator, 32 | ScrollDownButton as SelectScrollDownButton, 33 | ScrollUpButton as SelectScrollUpButton, 34 | }; 35 | -------------------------------------------------------------------------------- /src/routes/docs/components/[slug]/+page.ts: -------------------------------------------------------------------------------- 1 | import { error } from '@sveltejs/kit'; 2 | import { parse } from 'svelte-docgen'; 3 | 4 | type ParsedComponent = ReturnType; 5 | 6 | const loaders: Record Promise<{ default: ParsedComponent }>> = Object.fromEntries([ 7 | ...Object.entries(import.meta.glob('$svmlgl/**/*.svelte', { query: '?docgen' })).map(([key, value]) => { 8 | const name = key.match(/\/([^/]+)\.svelte$/)?.[1]; 9 | return [name, value] as const; 10 | }), 11 | ...Object.entries(import.meta.glob('$svmlglext/**/*.svelte', { query: '?docgen' })).map(([key, value]) => { 12 | const name = key.match(/\/([^/]+)\.svelte$/)?.[1]; 13 | return [name, value] as const; 14 | }) 15 | ]); 16 | 17 | export const load = async ({ params }) => { 18 | const { slug } = params; 19 | const loader = loaders[slug](); 20 | if (!loader) { 21 | error(404, `Component '${slug}' not found`); 22 | } 23 | const doc = (await loader).default; 24 | return { 25 | title: slug, 26 | targetComponent: slug, 27 | doc 28 | }; 29 | }; 30 | -------------------------------------------------------------------------------- /src/routes/docs/[slug]/+page.ts: -------------------------------------------------------------------------------- 1 | import { error } from '@sveltejs/kit'; 2 | import type { Component } from 'svelte'; 3 | import { browser } from '$app/environment'; 4 | 5 | import { createHighlighter, createJavaScriptRegexEngine, createOnigurumaEngine } from 'shiki'; 6 | import svelte from 'shiki/langs/svelte.mjs'; 7 | import dark from 'shiki/themes/github-dark-default.mjs'; 8 | 9 | const shiki = createHighlighter({ 10 | themes: [dark], 11 | langs: [svelte], 12 | engine: browser ? createOnigurumaEngine(import('shiki/wasm')) : createJavaScriptRegexEngine() 13 | }); 14 | 15 | export const load = async ({ params }) => { 16 | const { slug } = params; 17 | 18 | try { 19 | const post = (await import(`$content/docs/${slug}/content.svelte.md`)) as { 20 | default: Component; 21 | metadata: { 22 | title: string; 23 | description: string; 24 | }; 25 | }; 26 | return { 27 | Content: post.default, 28 | meta: { ...post.metadata, slug }, 29 | shiki: await shiki 30 | }; 31 | } catch { 32 | error(404, `Docs '${slug}' not found`); 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/map/Projection.svelte: -------------------------------------------------------------------------------- 1 | 31 | -------------------------------------------------------------------------------- /LICENSE-MIT.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. -------------------------------------------------------------------------------- /src/routes/examples/[slug]/+page.ts: -------------------------------------------------------------------------------- 1 | import { error } from '@sveltejs/kit'; 2 | import type { Component } from 'svelte'; 3 | import { browser } from '$app/environment'; 4 | 5 | import { createHighlighter, createJavaScriptRegexEngine, createOnigurumaEngine } from 'shiki'; 6 | import svelte from 'shiki/langs/svelte.mjs'; 7 | import dark from 'shiki/themes/github-dark-default.mjs'; 8 | 9 | const shiki = createHighlighter({ 10 | themes: [dark], 11 | langs: [svelte], 12 | engine: browser ? createOnigurumaEngine(import('shiki/wasm')) : createJavaScriptRegexEngine() 13 | }); 14 | 15 | export const load = async ({ params }) => { 16 | const { slug } = params; 17 | 18 | try { 19 | const post = (await import(`$content/examples/${slug}/content.svelte.md`)) as { 20 | default: Component; 21 | metadata: { 22 | title: string; 23 | description?: string; 24 | original?: string; 25 | }; 26 | }; 27 | return { 28 | Content: post.default, 29 | meta: { ...post.metadata, slug }, 30 | shiki: await shiki 31 | }; 32 | } catch { 33 | error(404, `Example '${slug}' not found`); 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /src/lib/components/ui/tabs/tabs-trigger.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | -------------------------------------------------------------------------------- /src/routes/DarkModeSelector.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | Toggle theme 15 | 16 | 17 | setMode('light')}>Light 18 | setMode('dark')}>Dark 19 | resetMode()}>System 20 | 21 | 22 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/map/Terrain.svelte: -------------------------------------------------------------------------------- 1 | 33 | -------------------------------------------------------------------------------- /src/content/examples/dynamic-image/DynamicImage.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 | 25 | 26 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/controls/TerrainControl.svelte: -------------------------------------------------------------------------------- 1 | 37 | -------------------------------------------------------------------------------- /src/content/examples/3d-extrusion-floorplan/Floorplan.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 27 | {@render children?.()} 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/content/examples/video-on-a-map/Video.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 25 | 26 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/routes/docs/[slug]/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 |
    8 | 9 | 10 | 11 | Docs 12 | 13 | 14 | 15 | {data.meta.title} 16 | 17 | 18 | 19 | 20 |

    {data.meta.title}

    21 |

    22 | {data.meta.description} 23 |

    24 | 25 |
    26 | 27 |
    28 |
    29 | 32 |
    33 | 34 | 35 | {data.meta.title} - Svelte MapLibre GL 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | {#snippet children({ checked })} 24 | 25 | {#if checked} 26 | 27 | {/if} 28 | 29 | {@render childrenProp?.({ checked })} 30 | {/snippet} 31 | 32 | -------------------------------------------------------------------------------- /src/lib/components/ui/radio-group/radio-group-item.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | {#snippet children({ checked })} 23 |
    24 | {#if checked} 25 | 26 | {/if} 27 |
    28 | {/snippet} 29 |     30 | -------------------------------------------------------------------------------- /src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 27 | 28 | -------------------------------------------------------------------------------- /src/lib/components/ui/switch/switch.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 23 | 29 | 30 | -------------------------------------------------------------------------------- /src/routes/docs/components/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "components": [ 3 | "AttributionControl", 4 | "BackgroundLayer", 5 | "CanvasSource", 6 | "CircleLayer", 7 | "ColorReliefLayer", 8 | "CustomControl", 9 | "CustomLayer", 10 | "FeatureState", 11 | "FillExtrusionLayer", 12 | "FillLayer", 13 | "FullScreenControl", 14 | "GeoJSONSource", 15 | "GeolocateControl", 16 | "GlobeControl", 17 | "Hash", 18 | "HeatmapLayer", 19 | "HillshadeLayer", 20 | "Image", 21 | "ImageLoader", 22 | "ImageSource", 23 | "Light", 24 | "LineLayer", 25 | "LogoControl", 26 | "MapLibre", 27 | "Marker", 28 | "NavigationControl", 29 | "Popup", 30 | "Projection", 31 | "Protocol", 32 | "QueryRenderedFeatures", 33 | "QuerySourceFeatures", 34 | "RasterDEMTileSource", 35 | "RasterLayer", 36 | "RasterTileSource", 37 | "RawLayer", 38 | "RawSource", 39 | "ScaleControl", 40 | "Sky", 41 | "Sprite", 42 | "SymbolLayer", 43 | "Terrain", 44 | "TerrainControl", 45 | "VectorTileSource", 46 | "VideoSource" 47 | ], 48 | "extensions": { 49 | "@svelte-maplibre-gl/contour": ["MapLibreContourSource"], 50 | "@svelte-maplibre-gl/deckgl": ["DeckGLOverlay"], 51 | "@svelte-maplibre-gl/pmtiles": ["PMTilesProtocol"], 52 | "@svelte-maplibre-gl/terradraw": ["TerraDraw"] 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/content/docs/quickstart/content.svelte.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Quickstart 3 | description: Get started with svelte-maplibre-gl in just a few minutes. 4 | --- 5 | 6 | 14 | 15 | ## 1. Launch a SvelteKit Project 16 | 17 | Create a new SvelteKit project using the official [Svelte CLI](https://svelte.dev/docs/kit/creating-a-project). 18 | 19 | ```bash 20 | npx sv create myapp 21 | # Make sure to enable the Tailwind CSS add-on, 22 | # as our examples use it for styling. 23 | 24 | cd myapp 25 | npm install 26 | ``` 27 | 28 | ## 2. Install `svelte-maplibre-gl` 29 | 30 | ```bash 31 | npm install -D svelte-maplibre-gl 32 | ``` 33 | 34 | ## 3. Add the Simplest Map 35 | 36 | Now you can add the simplest MapLibre GL JS map to your `+page.svelte` file with just one line of code. 37 | 38 | 39 | 40 | 41 | ## 4. Put a Marker on the Map 42 | 43 | Let’s set an initial zoom and put a marker pin on the map. 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 28 | -------------------------------------------------------------------------------- /src/content/examples/pmtiles/PMTiles.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | 21 | 22 | 23 | 41 | -------------------------------------------------------------------------------- /src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 24 | 25 | 26 | 27 | 28 |
    29 |
    30 |
    31 |
    32 |
    33 |
    34 | {@render children()} 35 |
    36 | 37 |
    38 |
    39 |

    © {currentYear} Svelte Maplibre GL contributors

    40 |
    41 |
    42 | 43 | 44 | 45 | 46 | Svelte MapLibre GL 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/content/CodeBlock.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 |
    21 |
    22 | 23 | {@html shiki.codeToHtml(_content, { lang: 'svelte', theme: 'github-dark-default' })} 24 |
    25 |
    26 | Our examples use Tailwind CSS and 27 | shadcn-svelte. 28 |
    29 |
    30 | 31 | 49 | -------------------------------------------------------------------------------- /extensions/pmtiles/src/lib/PMTilesProtocol.svelte: -------------------------------------------------------------------------------- 1 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/lib/components/ui/select/select-item.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 26 | {#snippet children({ selected, highlighted })} 27 | 28 | {#if selected} 29 | 30 | {/if} 31 | 32 | {#if childrenProp} 33 | {@render childrenProp({ selected, highlighted })} 34 | {:else} 35 | {label || value} 36 | {/if} 37 | {/snippet} 38 | 39 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/controls/CustomControl.svelte: -------------------------------------------------------------------------------- 1 | 47 | 48 | {#if !givenControl} 49 |
    50 | {@render children?.()} 51 |
    52 | {/if} 53 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/controls/FullScreenControl.svelte: -------------------------------------------------------------------------------- 1 | 38 | -------------------------------------------------------------------------------- /src/routes/examples/[slug]/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 |
    8 | 9 | 10 | 11 | Examples 12 | 13 | 14 | 15 | {data.meta.title} 16 | 17 | 18 | 19 | 20 |

    {data.meta.title}

    21 |
    22 |

    23 | {data.meta.description} 24 |

    25 | {#if data.meta.original} 26 |

    27 | Based on: {data.meta.original} 28 |

    29 | {/if} 30 |
    31 | 32 |
    33 | 34 |
    35 |
    36 | 39 |
    40 | 41 | 42 | {data.meta.title} - Svelte MapLibre GL 43 | 44 | 45 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | concurrency: ${{ github.workflow }}-${{ github.ref }} 9 | 10 | jobs: 11 | release: 12 | name: Release 13 | runs-on: ubuntu-latest 14 | permissions: 15 | contents: write 16 | pull-requests: write 17 | id-token: write 18 | steps: 19 | - name: Checkout Repo 20 | uses: actions/checkout@v4 21 | 22 | - name: Setup pnpm 23 | run: npm i -g --force corepack@latest && corepack enable 24 | 25 | - name: Setup Node.js 26 | uses: actions/setup-node@v4 27 | with: 28 | node-version: 22 29 | cache: 'pnpm' 30 | 31 | - name: Install Dependencies 32 | run: pnpm install 33 | 34 | - name: Create Release Pull Request or Publish to npm 35 | id: changesets 36 | uses: changesets/action@v1 37 | with: 38 | publish: pnpm run release 39 | version: pnpm run version 40 | env: 41 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 42 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 43 | 44 | # Generate preview releases for PRs 45 | - name: Publish Preview Packages 46 | if: steps.changesets.outputs.published != 'true' 47 | run: | 48 | pnpm build:packages 49 | pnpx pkg-pr-new publish \ 50 | ./svelte-maplibre-gl \ 51 | ./extensions/contour \ 52 | ./extensions/deckgl \ 53 | ./extensions/pmtiles \ 54 | ./extensions/terradraw 55 | -------------------------------------------------------------------------------- /src/lib/components/ui/select/select-trigger.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 27 | {@render children?.()} 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/lib/components/ui/checkbox/checkbox.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 27 | {#snippet children({ checked, indeterminate })} 28 |
    29 | {#if checked} 30 | 31 | {:else if indeterminate} 32 | 33 | {/if} 34 |
    35 | {/snippet} 36 |     37 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | // mdsvex 2 | import { mdsvex, escapeSvelte } from 'mdsvex'; 3 | import { createHighlighter } from 'shiki'; 4 | 5 | const theme = 'github-dark-default'; 6 | const highlighter = await createHighlighter({ 7 | themes: [theme], 8 | langs: ['javascript', 'typescript', 'svelte', 'bash'] 9 | }); 10 | 11 | /** @type {import('mdsvex').MdsvexOptions} */ 12 | const mdsvexOptions = { 13 | highlight: { 14 | highlighter: async (code, lang = 'text') => { 15 | const html = escapeSvelte(highlighter.codeToHtml(code, { lang, theme })); 16 | return `{@html \`${html}\` }`; 17 | } 18 | }, 19 | extensions: ['.svelte.md', '.svx'] 20 | }; 21 | 22 | // SvelteKit 23 | import adapter from '@sveltejs/adapter-cloudflare'; 24 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 25 | 26 | /** @type {import('@sveltejs/kit').Config} */ 27 | const config = { 28 | // Consult https://svelte.dev/docs/kit/integrations 29 | // for more information about preprocessors 30 | preprocess: [vitePreprocess(), mdsvex(mdsvexOptions)], 31 | 32 | kit: { 33 | // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. 34 | // If your environment is not supported, or you settled on a specific environment, switch out the adapter. 35 | // See https://svelte.dev/docs/kit/adapters for more information about adapters. 36 | adapter: adapter(), 37 | alias: { 38 | $content: 'src/content', 39 | $svmlgl: 'svelte-maplibre-gl/src/lib', 40 | $svmlglext: 'extensions/' 41 | } 42 | }, 43 | 44 | extensions: ['.svelte', '.svx', '.svelte.md'] 45 | }; 46 | 47 | export default config; 48 | -------------------------------------------------------------------------------- /src/content/examples/cursor/Cursor.svelte: -------------------------------------------------------------------------------- 1 | 43 | 44 | 51 | 52 | (cursor = e.features![0].properties.cursor)} 54 | onmouseleave={() => (cursor = undefined)} 55 | paint={{ 56 | 'circle-radius': 12, 57 | 'circle-color': '#007cbf', 58 | 'circle-stroke-color': '#fff', 59 | 'circle-stroke-width': 3 60 | }} 61 | /> 62 | 63 | 64 | -------------------------------------------------------------------------------- /src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 31 | {#snippet children({ checked, indeterminate })} 32 | 33 | {#if indeterminate} 34 | 35 | {:else} 36 | 37 | {/if} 38 | 39 | {@render childrenProp?.()} 40 | {/snippet} 41 | 42 | -------------------------------------------------------------------------------- /src/content/examples/globe-atmosphere/Globe.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 | 26 | 27 | 28 | 29 | 30 | 31 |
    34 |
    35 | 36 | 37 |
    38 |
    39 | 40 | 41 |
    42 |
    43 |     44 | -------------------------------------------------------------------------------- /src/routes/docs/components/[slug]/Prop.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | {name} 12 |
    13 | {#if prop.isOptional} 14 | optional 15 | {:else} 16 | required 17 | {/if} 18 | {#if prop.isBindable} 19 | bindable 20 | {/if} 21 |
    22 |     23 | 24 | 25 | 
    {@html formatType(prop.type, types)}
    26 |     27 | 28 |
    29 | {#if prop.description} 30 | {formatDescription(prop.description)} 31 | {:else} 32 | - 33 | {/if} 34 |
    35 | {#if !prop.isBindable && prop.default && typeof prop.default !== 'string' && prop.default.kind !== 'undefined'} 36 |
    37 | default: 38 | 39 | {@html formatType(prop.default, types)} 40 |
    41 | {/if} 42 |     43 |     44 | 45 | 50 | -------------------------------------------------------------------------------- /src/routes/sitemap.xml/+server.ts: -------------------------------------------------------------------------------- 1 | import { toc as docsToc } from '$content/docs/toc.js'; 2 | import { toc as exampleToc } from '$content/examples/toc.js'; 3 | import { toc as componentToc } from '$content/components/toc.js'; 4 | import type { RequestHandler } from '@sveltejs/kit'; 5 | 6 | export const GET: RequestHandler = async ({ request }) => { 7 | const urls: string[] = []; 8 | const origin = new URL(request.url).origin; 9 | 10 | urls.push(origin + '/'); 11 | 12 | urls.push(origin + '/examples/'); 13 | for (const section of exampleToc) { 14 | for (const [path] of Object.entries(section.items)) { 15 | urls.push(origin + path); 16 | } 17 | } 18 | 19 | urls.push(origin + '/docs/components/'); 20 | for (const section of componentToc) { 21 | for (const [path] of Object.entries(section.items)) { 22 | urls.push(origin + path); 23 | } 24 | } 25 | for (const section of docsToc) { 26 | for (const [path] of Object.entries(section.items)) { 27 | urls.push(origin + path); 28 | } 29 | } 30 | 31 | return new Response( 32 | ` 33 | 34 | 42 | ${urls.map((url) => `${url}`).join('\n')} 43 | `.trim(), 44 | { 45 | headers: { 46 | 'Content-Type': 'application/xml' 47 | } 48 | } 49 | ); 50 | }; 51 | -------------------------------------------------------------------------------- /src/content/examples/hover-styles/HoverStyles.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 14 | 15 | { 22 | // Listen to mousemove events to track the hovered feature 23 | hoveredFeature = ev.features?.[0]; 24 | lnglat = ev.lngLat; // cursor location 25 | }} 26 | onmouseleave={() => (hoveredFeature = undefined)} 27 | /> 28 | 36 | {#if hoveredFeature} 37 | 38 | 39 | {hoveredFeature.properties.STATE_NAME} 40 | {/if} 41 | 42 | 43 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/utilities/QueryRenderedFeatures.svelte: -------------------------------------------------------------------------------- 1 | 58 | 59 | {#if children}{#each features as feature (feature.id)}{@render children(feature)}{/each}{/if} 60 | -------------------------------------------------------------------------------- /src/content/examples/marker-popup/MarkerAndPopup.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 |
    24 | 25 | 26 | 
    marker: {lngLatText}
    27 |
    28 | 29 | 37 | 38 | {#snippet content()} 39 |
    40 |
    🐶
    41 |
    {lngLatText}
    42 |
    43 | {/snippet} 44 | 45 | {lngLatText} 46 | 47 |     48 |     49 | -------------------------------------------------------------------------------- /src/content/examples/canvas-source/Canvas.svelte: -------------------------------------------------------------------------------- 1 | 35 | 36 | 37 | 38 | (animate = !animate)} 44 | > 45 | 46 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /src/lib/components/ui/dropdown-menu/index.ts: -------------------------------------------------------------------------------- 1 | import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; 2 | import CheckboxItem from "./dropdown-menu-checkbox-item.svelte"; 3 | import Content from "./dropdown-menu-content.svelte"; 4 | import Group from "./dropdown-menu-group.svelte"; 5 | import Item from "./dropdown-menu-item.svelte"; 6 | import Label from "./dropdown-menu-label.svelte"; 7 | import RadioGroup from "./dropdown-menu-radio-group.svelte"; 8 | import RadioItem from "./dropdown-menu-radio-item.svelte"; 9 | import Separator from "./dropdown-menu-separator.svelte"; 10 | import Shortcut from "./dropdown-menu-shortcut.svelte"; 11 | import Trigger from "./dropdown-menu-trigger.svelte"; 12 | import SubContent from "./dropdown-menu-sub-content.svelte"; 13 | import SubTrigger from "./dropdown-menu-sub-trigger.svelte"; 14 | import GroupHeading from "./dropdown-menu-group-heading.svelte"; 15 | const Sub = DropdownMenuPrimitive.Sub; 16 | const Root = DropdownMenuPrimitive.Root; 17 | 18 | export { 19 | CheckboxItem, 20 | Content, 21 | Root as DropdownMenu, 22 | CheckboxItem as DropdownMenuCheckboxItem, 23 | Content as DropdownMenuContent, 24 | Group as DropdownMenuGroup, 25 | Item as DropdownMenuItem, 26 | Label as DropdownMenuLabel, 27 | RadioGroup as DropdownMenuRadioGroup, 28 | RadioItem as DropdownMenuRadioItem, 29 | Separator as DropdownMenuSeparator, 30 | Shortcut as DropdownMenuShortcut, 31 | Sub as DropdownMenuSub, 32 | SubContent as DropdownMenuSubContent, 33 | SubTrigger as DropdownMenuSubTrigger, 34 | Trigger as DropdownMenuTrigger, 35 | GroupHeading as DropdownMenuGroupHeading, 36 | Group, 37 | GroupHeading, 38 | Item, 39 | Label, 40 | RadioGroup, 41 | RadioItem, 42 | Root, 43 | Separator, 44 | Shortcut, 45 | Sub, 46 | SubContent, 47 | SubTrigger, 48 | Trigger, 49 | }; 50 | -------------------------------------------------------------------------------- /extensions/pmtiles/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@svelte-maplibre-gl/pmtiles", 3 | "version": "1.0.2", 4 | "license": "(MIT OR Apache-2.0)", 5 | "description": "PMTiles extension for svelte-maplibre-gl", 6 | "repository": { 7 | "url": "https://github.com/MIERUNE/svelte-maplibre-gl" 8 | }, 9 | "homepage": "https://svelte-maplibre-gl.mierune.dev/", 10 | "keywords": [ 11 | "map", 12 | "svelte", 13 | "maplibre", 14 | "maplibre-gl", 15 | "pmtiles" 16 | ], 17 | "scripts": { 18 | "build": "vite build && npm run prepack", 19 | "preview": "vite preview", 20 | "prepare": "svelte-kit sync || echo ''", 21 | "prepack": "svelte-kit sync && svelte-package && publint", 22 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 23 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 24 | "lint": "prettier --check ." 25 | }, 26 | "files": [ 27 | "dist", 28 | "!dist/**/*.test.*", 29 | "!dist/**/*.spec.*" 30 | ], 31 | "sideEffects": false, 32 | "svelte": "./dist/index.js", 33 | "types": "./dist/index.d.ts", 34 | "type": "module", 35 | "exports": { 36 | ".": { 37 | "types": "./dist/index.d.ts", 38 | "svelte": "./dist/index.js" 39 | } 40 | }, 41 | "peerDependencies": { 42 | "pmtiles": "^4.0.0", 43 | "maplibre-gl": "^5.0.0 || ^4.0.0", 44 | "svelte": ">=5.0.0", 45 | "svelte-maplibre-gl": "workspace:*" 46 | }, 47 | "devDependencies": { 48 | "@sveltejs/kit": "catalog:", 49 | "@sveltejs/package": "catalog:", 50 | "@sveltejs/vite-plugin-svelte": "catalog:", 51 | "maplibre-gl": "catalog:", 52 | "pmtiles": "catalog:", 53 | "publint": "catalog:", 54 | "svelte": "catalog:", 55 | "svelte-check": "catalog:", 56 | "svelte-maplibre-gl": "workspace:*", 57 | "typescript": "catalog:", 58 | "vite": "catalog:" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-maplibre-gl", 3 | "version": "1.0.2", 4 | "license": "(MIT OR Apache-2.0)", 5 | "description": "Build interactive web maps effortlessly with MapLibre GL JS and Svelte", 6 | "repository": { 7 | "url": "https://github.com/MIERUNE/svelte-maplibre-gl" 8 | }, 9 | "homepage": "https://svelte-maplibre-gl.mierune.dev/", 10 | "keywords": [ 11 | "map", 12 | "svelte", 13 | "maplibre", 14 | "maplibre-gl", 15 | "maplibre-gl-js", 16 | "geospatial", 17 | "mapping", 18 | "gis" 19 | ], 20 | "scripts": { 21 | "dev": "vite dev", 22 | "build": "vite build && npm run prepack", 23 | "preview": "vite preview", 24 | "prepare": "svelte-kit sync || echo ''", 25 | "prepack": "svelte-kit sync && svelte-package && publint", 26 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 27 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 28 | "lint": "prettier --check ." 29 | }, 30 | "files": [ 31 | "dist", 32 | "!dist/**/*.test.*", 33 | "!dist/**/*.spec.*" 34 | ], 35 | "sideEffects": [ 36 | "**/*.css" 37 | ], 38 | "svelte": "./dist/index.js", 39 | "types": "./dist/index.d.ts", 40 | "type": "module", 41 | "exports": { 42 | ".": { 43 | "types": "./dist/index.d.ts", 44 | "svelte": "./dist/index.js" 45 | } 46 | }, 47 | "peerDependencies": { 48 | "maplibre-gl": "^5.0.0 || ^4.0.0", 49 | "svelte": ">=5.0.0" 50 | }, 51 | "devDependencies": { 52 | "@sveltejs/kit": "catalog:", 53 | "@sveltejs/package": "catalog:", 54 | "@sveltejs/vite-plugin-svelte": "catalog:", 55 | "@types/geojson": "catalog:", 56 | "maplibre-gl": "catalog:", 57 | "publint": "catalog:", 58 | "svelte": "catalog:", 59 | "svelte-check": "catalog:", 60 | "typescript": "catalog:", 61 | "vite": "catalog:" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /extensions/contour/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@svelte-maplibre-gl/contour", 3 | "version": "1.0.2", 4 | "license": "(MIT OR Apache-2.0)", 5 | "description": "maplibre-contour extension for svelte-maplibre-gl", 6 | "repository": { 7 | "url": "https://github.com/MIERUNE/svelte-maplibre-gl" 8 | }, 9 | "homepage": "https://svelte-maplibre-gl.mierune.dev/", 10 | "keywords": [ 11 | "map", 12 | "svelte", 13 | "maplibre", 14 | "maplibre-gl", 15 | "contour" 16 | ], 17 | "scripts": { 18 | "build": "vite build && npm run prepack", 19 | "preview": "vite preview", 20 | "prepare": "svelte-kit sync || echo ''", 21 | "prepack": "svelte-kit sync && svelte-package && publint", 22 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 23 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 24 | "lint": "prettier --check ." 25 | }, 26 | "files": [ 27 | "dist", 28 | "!dist/**/*.test.*", 29 | "!dist/**/*.spec.*" 30 | ], 31 | "sideEffects": false, 32 | "svelte": "./dist/index.js", 33 | "types": "./dist/index.d.ts", 34 | "type": "module", 35 | "exports": { 36 | ".": { 37 | "types": "./dist/index.d.ts", 38 | "svelte": "./dist/index.js" 39 | } 40 | }, 41 | "peerDependencies": { 42 | "maplibre-contour": ">=0.1.0", 43 | "maplibre-gl": "^5.0.0 || ^4.0.0", 44 | "svelte": ">=5.0.0", 45 | "svelte-maplibre-gl": "workspace:*" 46 | }, 47 | "devDependencies": { 48 | "@sveltejs/kit": "catalog:", 49 | "@sveltejs/package": "catalog:", 50 | "@sveltejs/vite-plugin-svelte": "catalog:", 51 | "maplibre-contour": "catalog:", 52 | "maplibre-gl": "catalog:", 53 | "publint": "catalog:", 54 | "svelte": "catalog:", 55 | "svelte-check": "catalog:", 56 | "svelte-maplibre-gl": "workspace:*", 57 | "typescript": "catalog:", 58 | "vite": "catalog:" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import maplibregl from 'maplibre-gl'; 2 | 3 | let layerIdCounter = 0; 4 | let sourceIdCounter = 0; 5 | 6 | export function generateLayerID() { 7 | return `svmlgl-layer-${layerIdCounter++}`; 8 | } 9 | 10 | export function generateSourceID() { 11 | return `svmlgl-source-${sourceIdCounter++}`; 12 | } 13 | 14 | /** 15 | * Set an event listener on an Evented object, and return a function that will remove the listener. 16 | * 17 | * Intended to be used within the $effect rune. 18 | */ 19 | export function resetEventListener( 20 | evented: maplibregl.Evented | null | undefined, 21 | type: string, 22 | listener: maplibregl.Listener | undefined 23 | ) { 24 | if (listener) { 25 | evented?.on(type, listener); 26 | } 27 | const prevListener = listener; 28 | return () => { 29 | if (prevListener) { 30 | evented?.off(type, prevListener); 31 | } 32 | }; 33 | } 34 | 35 | /** 36 | * Set a Layer event listener on the Map object, and return a function that will remove the listener. 37 | * 38 | * Intended to be used within the $effect rune. 39 | */ 40 | export function resetLayerEventListener( 41 | map: maplibregl.Map | null, 42 | type: keyof maplibregl.MapLayerEventType, 43 | layer: string, 44 | listener: maplibregl.Listener | undefined 45 | ) { 46 | if (listener) { 47 | map?.on(type, layer, listener); 48 | } 49 | const prevListener = listener; 50 | return () => { 51 | if (prevListener) { 52 | map?.off(type, layer, prevListener); 53 | } 54 | }; 55 | } 56 | 57 | export function formatLngLat(target: maplibregl.LngLatLike, lnglat: maplibregl.LngLat): maplibregl.LngLatLike { 58 | if (Array.isArray(target)) { 59 | return [lnglat.lng, lnglat.lat]; 60 | } else if ('lon' in target) { 61 | return { lon: lnglat.lng, lat: lnglat.lat }; 62 | } else { 63 | return { lng: lnglat.lng, lat: lnglat.lat }; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/lib/components/ui/select/select-content.svelte: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | 30 | 31 | 36 | {@render children?.()} 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /extensions/terradraw/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@svelte-maplibre-gl/terradraw", 3 | "version": "1.0.2", 4 | "license": "(MIT OR Apache-2.0)", 5 | "description": "TerraDraw extension for svelte-maplibre-gl", 6 | "repository": { 7 | "url": "https://github.com/MIERUNE/svelte-maplibre-gl" 8 | }, 9 | "homepage": "https://svelte-maplibre-gl.mierune.dev/", 10 | "keywords": [ 11 | "map", 12 | "svelte", 13 | "maplibre", 14 | "maplibre-gl", 15 | "terradraw" 16 | ], 17 | "scripts": { 18 | "build": "vite build && npm run prepack", 19 | "preview": "vite preview", 20 | "prepare": "svelte-kit sync || echo ''", 21 | "prepack": "svelte-kit sync && svelte-package && publint", 22 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 23 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 24 | "lint": "prettier --check ." 25 | }, 26 | "files": [ 27 | "dist", 28 | "!dist/**/*.test.*", 29 | "!dist/**/*.spec.*" 30 | ], 31 | "sideEffects": false, 32 | "svelte": "./dist/index.js", 33 | "types": "./dist/index.d.ts", 34 | "type": "module", 35 | "exports": { 36 | ".": { 37 | "types": "./dist/index.d.ts", 38 | "svelte": "./dist/index.js" 39 | } 40 | }, 41 | "peerDependencies": { 42 | "terra-draw": "^1.0.0", 43 | "terra-draw-maplibre-gl-adapter": "^1.0.3", 44 | "maplibre-gl": "^5.0.0 || ^4.0.0", 45 | "svelte": ">=5.0.0", 46 | "svelte-maplibre-gl": "workspace:*" 47 | }, 48 | "devDependencies": { 49 | "@sveltejs/kit": "catalog:", 50 | "@sveltejs/package": "catalog:", 51 | "@sveltejs/vite-plugin-svelte": "catalog:", 52 | "maplibre-gl": "catalog:", 53 | "publint": "catalog:", 54 | "svelte": "catalog:", 55 | "svelte-check": "catalog:", 56 | "svelte-maplibre-gl": "workspace:*", 57 | "terra-draw": "catalog:", 58 | "terra-draw-maplibre-gl-adapter": "catalog:", 59 | "typescript": "catalog:", 60 | "vite": "catalog:" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 |
    7 |

    Svelte MapLibre GL

    8 |

    9 | Svelte 5 wrapper for 🗺 10 | MapLibre GL JS — Build interactive web maps 11 | effortlessly with Svelte’s reactive and declarative power 🚀 12 |

    13 |

    14 | Explore Examples 19 |

    20 |

    21 | hero 22 |

    23 | 24 |

    Installation

    25 | 
    npm install --save-dev svelte-maplibre-gl
    26 | 27 |

    Contents

    28 | 33 | 34 |

    Features

    35 |
      36 |
    • The most declarative and reactive MapLibre GL JS experience, powered by Svelte 5
      • 37 |
    • 38 | A flexible, minimally opinionated API design that is suitable for both beginners and experienced MapLibre users 39 |
      • 40 |
    • Traditional imperative MapLibre GL JS usage remains fully supported
      • 41 |
    42 |
    43 |
    44 | 45 | 46 | Svelte MapLibre GL - Build interactive web maps effortlessly with MapLibre GL JS and Svelte 47 | 48 | 49 | -------------------------------------------------------------------------------- /extensions/deckgl/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@svelte-maplibre-gl/deckgl", 3 | "version": "1.0.2", 4 | "license": "(MIT OR Apache-2.0)", 5 | "description": "DeckGL extension for svelte-maplibre-gl", 6 | "repository": { 7 | "url": "https://github.com/MIERUNE/svelte-maplibre-gl" 8 | }, 9 | "homepage": "https://svelte-maplibre-gl.mierune.dev/", 10 | "keywords": [ 11 | "map", 12 | "svelte", 13 | "maplibre", 14 | "maplibre-gl", 15 | "deckgl" 16 | ], 17 | "scripts": { 18 | "build": "vite build && npm run prepack", 19 | "preview": "vite preview", 20 | "prepare": "svelte-kit sync || echo ''", 21 | "prepack": "svelte-kit sync && svelte-package && publint", 22 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 23 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 24 | "lint": "prettier --check ." 25 | }, 26 | "files": [ 27 | "dist", 28 | "!dist/**/*.test.*", 29 | "!dist/**/*.spec.*" 30 | ], 31 | "sideEffects": false, 32 | "svelte": "./dist/index.js", 33 | "types": "./dist/index.d.ts", 34 | "type": "module", 35 | "exports": { 36 | ".": { 37 | "types": "./dist/index.d.ts", 38 | "svelte": "./dist/index.js" 39 | } 40 | }, 41 | "peerDependencies": { 42 | "@deck.gl/core": "^9.1.0", 43 | "@deck.gl/layers": "^9.1.0", 44 | "@deck.gl/mapbox": "^9.1.0", 45 | "maplibre-gl": "^5.0.0 || ^4.0.0", 46 | "svelte": ">=5.0.0", 47 | "svelte-maplibre-gl": "workspace:*" 48 | }, 49 | "devDependencies": { 50 | "@deck.gl/core": "catalog:", 51 | "@deck.gl/layers": "catalog:", 52 | "@deck.gl/mapbox": "catalog:", 53 | "@sveltejs/kit": "catalog:", 54 | "@sveltejs/package": "catalog:", 55 | "@sveltejs/vite-plugin-svelte": "catalog:", 56 | "maplibre-gl": "catalog:", 57 | "publint": "catalog:", 58 | "svelte": "catalog:", 59 | "svelte-check": "catalog:", 60 | "svelte-maplibre-gl": "workspace:*", 61 | "typescript": "catalog:", 62 | "vite": "catalog:" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/content/examples/deckgl-overlay/DeckGL.svelte: -------------------------------------------------------------------------------- 1 | 25 | 26 | 35 | d.source, 42 | getTargetPosition: (d) => d.target, 43 | getSourceColor: [0, 255, 100], 44 | getTargetColor: [0, 190, 255], 45 | getWidth: 5 46 | }) 47 | ]} 48 | /> 49 | 60 | 61 | -------------------------------------------------------------------------------- /src/lib/components/ui/badge/badge.svelte: -------------------------------------------------------------------------------- 1 | 24 | 25 | 40 | 41 | 49 | {@render children?.()} 50 | 51 | -------------------------------------------------------------------------------- /src/content/examples/global-state/Plain.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 37 | 49 | 50 | 51 | 52 |
    55 |
    56 | 57 | 62 |
    63 |
    64 |     65 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/utilities/QuerySourceFeatures.svelte: -------------------------------------------------------------------------------- 1 | 68 | 69 | {#if children}{#each features as feature (feature.id)}{@render children(feature)}{/each}{/if} 70 | -------------------------------------------------------------------------------- /src/lib/components/ui/slider/slider.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 18 | 29 | {#snippet children({ thumbs })} 30 | 37 | 43 | 44 | {#each thumbs as thumb (thumb)} 45 | 50 | {/each} 51 | {/snippet} 52 | 53 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/sources/FeatureState.svelte: -------------------------------------------------------------------------------- 1 | 60 | 61 | {@render children?.()} 62 | -------------------------------------------------------------------------------- /src/routes/GlobalToc.svelte: -------------------------------------------------------------------------------- 1 | 25 | 26 |
    33 | 34 |
    40 |
    41 |

    42 | Svelte MapLibre GL 43 |

    44 | 47 |
    48 |
    49 | 50 |
    51 |
    52 | 53 |
    54 |
    55 | 56 |
    57 |
    58 |
    59 | -------------------------------------------------------------------------------- /src/content/examples/toc.ts: -------------------------------------------------------------------------------- 1 | import type { Toc } from '$lib/components/types'; 2 | 3 | export const toc: Toc = [ 4 | { 5 | title: 'Basic', 6 | items: { 7 | '/examples/plain': 'Plain Map', 8 | '/examples/complex': 'Complex', 9 | '/examples/marker-popup': 'Marker and Popup', 10 | '/examples/basestyle': 'Change Base Style', 11 | '/examples/hover-styles': 'Hover Styles', 12 | '/examples/clusters': 'Clusters', 13 | '/examples/limit-interaction': 'Limit Map Interactions', 14 | '/examples/animate-images': 'Animate a Series of Images', 15 | '/examples/video-on-a-map': 'Video on a Map', 16 | '/examples/fullscreen': 'Fullscreen', 17 | '/examples/geolocate': 'Locate the User', 18 | '/examples/cursor': 'Change Cursor' 19 | } 20 | }, 21 | { 22 | title: 'Styles', 23 | items: { 24 | '/examples/terrain': '3D Terrain and Sky', 25 | '/examples/color-relief': 'Color Relief', 26 | '/examples/globe-atmosphere': 'Globe with an Atmosphere', 27 | '/examples/3d-buildings': '3D Buildings', 28 | '/examples/global-state': 'Global State' 29 | } 30 | }, 31 | { 32 | title: 'Utilities', 33 | items: { 34 | '/examples/image-loader': 'Load Images from URLs', 35 | '/examples/query-features': 'Query Features' 36 | } 37 | }, 38 | { 39 | title: 'Techniques', 40 | items: { 41 | '/examples/side-by-side': 'Side by Side', 42 | '/examples/3d-extrusion-floorplan': '3D Floor Plan' 43 | } 44 | }, 45 | { 46 | title: 'Advanced', 47 | items: { 48 | '/examples/custom-control': 'Custom Control', 49 | '/examples/custom-protocol': 'Custom Protocols', 50 | '/examples/canvas-source': 'Canvas Source', 51 | '/examples/custom-layer': 'Custom Layer', 52 | '/examples/dynamic-image': 'Dynamic Image', 53 | '/examples/threejs-model': '3D model with three.js' 54 | } 55 | }, 56 | { 57 | title: 'Extensions', 58 | items: { 59 | '/examples/pmtiles': 'PMTiles Protocol', 60 | '/examples/deckgl-overlay': 'deck.gl Overlay', 61 | '/examples/contour': 'Contour Lines', 62 | '/examples/terradraw': 'Terra Draw' 63 | } 64 | } 65 | ]; 66 | -------------------------------------------------------------------------------- /src/content/examples/custom-protocol/CustomProtocol.svelte: -------------------------------------------------------------------------------- 1 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /svelte-maplibre-gl/src/lib/map/Image.svelte: -------------------------------------------------------------------------------- 1 | 78 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Svelte MapLibre GL 2 | 3 | ![NPM Version](https://img.shields.io/npm/v/svelte-maplibre-gl) 4 | ![NPM License](https://img.shields.io/npm/l/svelte-maplibre-gl?color=96C902) 5 | 6 | :world_map: Build interactive web maps effortlessly with [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) and [Svelte](https://svelte.dev/). 7 | 8 | :point_right: **Documentaion and Live Demos:** https://svelte-maplibre-gl.mierune.dev/examples/ 9 | 10 | **Features:** 11 | 12 | - The most declarative and reactive MapLibre GL JS experience, powered by Svelte 5 13 | - A flexible, minimally opinionated API design that is suitable for both beginners and experienced MapLibre users 14 | - Freedom preserved — Traditional imperative MapLibre GL JS usage remains fully supported 15 | 16 | License: MIT or Apache 2.0 17 | 18 | hero image 19 | 20 | ## Installation 21 | 22 | ```bash 23 | npm install --save-dev svelte-maplibre-gl 24 | ``` 25 | 26 | `svelte-maplibre-gl` only works with **Svelte 5** and above. 27 | 28 | ## License 29 | 30 | Licensed under the [MIT License](./LICENSE-MIT.txt) or the [Apache License 2.0](./LICENSE-APACHE.txt), at your option. 31 | 32 | ## Acknowledgements 33 | 34 | This project `svelte-maplibre-gl` is built from scratch, while drawing strong inspiration from the work of the following libraries: 35 | 36 | - [`dimfeld/svelte-maplibre`](https://github.com/dimfeld/svelte-maplibre) — A library offering idiomatic Svelte support for the MapLibre GL mapping software 37 | - [`visgl/react-map-gl`](https://github.com/visgl/react-map-gl) — React friendly API wrapper around Mapbox/MapLibre GL JS 38 | 39 | ## Contributing 40 | 41 | Everyone is welcome to contribute to this project! There are many ways to support it, such as: 42 | 43 | - Trying it out and reporting any issues or missing features 44 | - Expanding, improving, or suggesting new examples 45 | - Any other ideas you might have! 46 | 47 | Your contributions are greatly appreciated. 48 | 49 | ### Authors 50 | 51 | [All contributors](https://github.com/MIERUNE/svelte-maplibre-gl/graphs/contributors)! 52 | 53 | Supported by MIERUNE Inc. 54 | -------------------------------------------------------------------------------- /extensions/terradraw/src/lib/TerraDraw.svelte: -------------------------------------------------------------------------------- 1 | 80 | --------------------------------------------------------------------------------