I built a development environment combining MapLibre GL JS and Svelte 🎉
The created environment is available on GitHub. Please use it!
mug-jp
/
maplibregljs-svelte-starter
Start MapLibre GL JS and Svelte easily. [MapLibre GL JS, Svelte, Vite]
maplibregljs-svelte-starter
Start MapLibre GL JS and Svelte easily.
- MapLibre GL JS v3.3.1
- Svelte v4.0.5
- node v20.6.1
- npm v9.8.1
Usage
Install package
npm install
code format
npm run format
build
npm run build
dev
npm run dev
Unit Tests
npm run test:unit
Lint
npm run lint
License
MIT
Copyright (c) 2023 MapLibre User Group Japan
Japanese
MapLibre GL JS & Svelte スターター
MapLibre GL JSとSvelteを手軽に始める
- MapLibre GL JS v3.3.1
- Svelte v4.0.5
- node v20.6.1
- npm v9.8.1
使用方法
パッケージインストール
npm install
コードフォーマット
npm run format
ビルド
npm run build
開発
npm run dev
Unitテスト
npm run test:unit
リント
npm run lint
ライセンス
MIT
Copyright (c) 2023 MapLibre User Group Japan
Advance Preparation
- Creating a Svelte project
Svelte #001 – environment setup with create-svelte
Execution environment
- node v20.6.1
- npm v9.8.1
Install MapLibre GL JS
Install MapLibre GL JS into your Svelte project.
npm install maplibre-gl
Building the map application
Finally, let's build the actual map application. Change or delete some files from the template.
Overall composition
package.json
{
"name": "maplibregljs-svelte-starter",
"version": "1.0.0",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"test": "npm run test:integration && npm run test:unit",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write .",
"test:integration": "playwright test",
"test:unit": "vitest"
},
"keywords": [],
"author": "MapLibre User Group Japan",
"license": "ISC",
"devDependencies": {
"@fontsource/fira-mono": "^4.5.10",
"@neoconfetti/svelte": "^1.0.0",
"@playwright/test": "^1.28.1",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.20.4",
"@types/cookie": "^0.5.1",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^4.4.2",
"vitest": "^0.32.2"
},
"type": "module",
"dependencies": {
"maplibre-gl": "^3.3.1"
}
}
/src/routes
+layout.svelte
Delete the existing page and leave the slot tag.
<script lang="ts">
import './styles.css';
</script>
<slot />
<style></style>
/src/routes
+page.svelte
Change to load the map component.
<script lang="ts">
import Map from '$lib/components/MapPane.svelte';
</script>
<svelte:head>
<title>MapLibre GL JS & Svelte Starter</title>
<meta name="description" content="MapLibre GL JS & Svelte Starter" />
</svelte:head>
<Map />
<style></style>
/src/lib/components
MapPane.svelte
Create a new MapLibre GL JS map component.
<script setup lang="ts">
import 'maplibre-gl/dist/maplibre-gl.css';
import { Map, NavigationControl } from 'maplibre-gl';
import { onMount } from 'svelte';
onMount(() => {
const map = new Map({
container: 'map',
style: {
version: 8,
sources: {
MIERUNEMAP: {
type: 'raster',
tiles: ['https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png'],
tileSize: 256,
attribution:
"Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
}
},
layers: [
{
id: 'MIERUNEMAP',
type: 'raster',
source: 'MIERUNEMAP',
minzoom: 0,
maxzoom: 18
}
]
},
center: [139.767, 35.681],
zoom: 11
});
map.addControl(
new NavigationControl({
visualizePitch: true
})
);
});
</script>
<div id="map" />
<style>
#map {
height: 100vh;
}
</style>
Let's check with a simple local server.
npm run dev
You can display it using a combination of Svelte and MapLibre GL JS!
Related Articles
References
MapLibre GL JS
Svelte
Top comments (1)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.