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
blog
Building a Map Application with MapLibre GL JS and Svelte
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
blog
MapLibre GL JSとSvelteを組み合わせた開発環境を構築してみた
使用方法
パッケージインストール
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.
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
Building a Map Application with MapLibre GL JS and Vue.js (script setup)
Yasunori Kirimoto for MapLibre User Group Japan ・ Sep 18 '23
Vite Support for Various Map Library Starters
Yasunori Kirimoto for AWS Heroes ・ Jun 29 '22
COMTiles (Cloud Optimized Map Tiles) hosted on Amazon S3 and Visualized with MapLibre GL JS
Yasunori Kirimoto for MIERUNE ・ Dec 23 '22
Amazon Location Service and AWS Amplify to Use Various Map Library
Yasunori Kirimoto for AWS Heroes ・ Jan 5 '23
References
MapLibre GL JS
Svelte
Top comments (1)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.