## Installation
```bash
npm install --save-dev svelte-maplibre-gl
```
`svelte-maplibre-gl` only works with **Svelte 5** and above.
## License
Licensed under the [MIT License](./LICENSE-MIT.txt) or the [Apache License 2.0](./LICENSE-APACHE.txt), at your option.
## Acknowledgements
This project `svelte-maplibre-gl` is built from scratch, while drawing strong inspiration from the work of the following libraries:
- [`dimfeld/svelte-maplibre`](https://github.com/dimfeld/svelte-maplibre) — A library offering idiomatic Svelte support for the MapLibre GL mapping software
- [`visgl/react-map-gl`](https://visgl.github.io/react-map-gl/) and [`visgl/react-maplibre`](https://visgl.github.io/react-maplibre/) — React friendly API wrapper around Mapbox/MapLibre GL JS
## Contributing
Everyone is welcome to contribute to this project! There are many ways to support it, such as:
- Trying it out and reporting any issues or missing features
- Expanding, improving, or suggesting new examples
- Any other ideas you might have!
Your contributions are greatly appreciated.
### Authors
[All contributors](https://github.com/MIERUNE/svelte-maplibre-gl/graphs/contributors)!
================================================
FILE: components.json
================================================
{
"$schema": "https://shadcn-svelte.com/schema.json",
"tailwind": {
"css": "src/app.css",
"baseColor": "slate"
},
"aliases": {
"components": "$lib/components",
"utils": "$lib/utils",
"ui": "$lib/components/ui",
"hooks": "$lib/hooks",
"lib": "$lib"
},
"typescript": true,
"registry": "https://shadcn-svelte.com/registry"
}
================================================
FILE: e2e/demo.test.ts
================================================
import { expect, test } from '@playwright/test';
test('home page has expected h1', async ({ page }) => {
await page.goto('/');
await expect(page.locator('h1')).toBeVisible();
});
================================================
FILE: eslint.config.js
================================================
import prettier from 'eslint-config-prettier';
import js from '@eslint/js';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import ts from 'typescript-eslint';
export default ts.config(
js.configs.recommended,
...ts.configs.recommended,
...svelte.configs['flat/recommended'],
prettier,
...svelte.configs['flat/prettier'],
{
languageOptions: {
globals: {
...globals.browser,
...globals.node
}
}
},
{
files: ['**/*.svelte', '**/*.svelte.ts'],
rules: {
// surpress "Expected an assignment or function call and instead saw an expression"
'@typescript-eslint/no-unused-expressions': 'off'
// 'svelte/require-each-key': 'off'
},
languageOptions: {
parserOptions: {
parser: ts.parser
}
}
},
{
ignores: ['**/build/', '**/.svelte-kit/', '**/dist/']
}
);
================================================
FILE: extensions/contour/CHANGELOG.md
================================================
# @svelte-maplibre-gl/contour
## 1.0.3
### Patch Changes
- Updated dependencies [6b3cd54]
- svelte-maplibre-gl@1.0.3
## 1.0.2
### Patch Changes
- Updated dependencies [608c2b5]
- svelte-maplibre-gl@1.0.2
## 1.0.1
### Patch Changes
- Updated dependencies [a5cc3ef]
- svelte-maplibre-gl@1.0.1
================================================
FILE: extensions/contour/package.json
================================================
{
"name": "@svelte-maplibre-gl/contour",
"version": "1.0.3",
"license": "(MIT OR Apache-2.0)",
"description": "maplibre-contour extension for svelte-maplibre-gl",
"repository": {
"url": "https://github.com/MIERUNE/svelte-maplibre-gl"
},
"homepage": "https://svelte-maplibre-gl.mierune.dev/",
"keywords": [
"map",
"svelte",
"maplibre",
"maplibre-gl",
"contour"
],
"scripts": {
"build": "vite build && npm run prepack",
"preview": "vite preview",
"prepare": "svelte-kit sync || echo ''",
"prepack": "svelte-kit sync && svelte-package && publint",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check ."
},
"files": [
"dist",
"!dist/**/*.test.*",
"!dist/**/*.spec.*"
],
"sideEffects": false,
"svelte": "./dist/index.js",
"types": "./dist/index.d.ts",
"type": "module",
"exports": {
".": {
"types": "./dist/index.d.ts",
"svelte": "./dist/index.js"
}
},
"peerDependencies": {
"maplibre-contour": ">=0.1.0",
"maplibre-gl": "^5.0.0 || ^4.0.0",
"svelte": ">=5.0.0",
"svelte-maplibre-gl": "workspace:*"
},
"devDependencies": {
"@sveltejs/kit": "catalog:",
"@sveltejs/package": "catalog:",
"@sveltejs/vite-plugin-svelte": "catalog:",
"maplibre-contour": "catalog:",
"maplibre-gl": "catalog:",
"publint": "catalog:",
"svelte": "catalog:",
"svelte-check": "catalog:",
"svelte-maplibre-gl": "workspace:*",
"typescript": "catalog:",
"vite": "catalog:"
}
}
================================================
FILE: extensions/contour/src/app.d.ts
================================================
// See https://svelte.dev/docs/kit/types#app.d.ts
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};
================================================
FILE: extensions/contour/src/app.html
================================================
%sveltekit.head%
{`lat: ${center[1].toFixed(3)}, lng: ${center[0].toFixed(3)}, z: ${zoom.toFixed(1)}, pitch: ${pitch.toFixed(1)}, bearing: ${bearing.toFixed(1)}`}
marker: {`${markerLnglat.lat.toFixed(3)}, ${markerLnglat.lng.toFixed(3)}`}
{logString}
marker: {lngLatText}
Svelte 5 wrapper for 🗺 MapLibre GL JS — Build interactive web maps effortlessly with Svelte’s reactive and declarative power 🚀
npm install --save-dev svelte-maplibre-gl{data.meta.description}
API Reference (beta) for {`<${data.targetComponent} />`}
{name}
{@html formatType(prop.type, types)}
{data.meta.description}
{#if data.meta.original}Based on: {data.meta.original}
{/if}