I built a development environment combining MapLibre GL JS and Svelte 🎉
The created environment is available on GitHub. Please use it!
Start MapLibre GL JS and Svelte easily. [MapLibre GL JS, Svelte, Vite]
maplibregljs-svelte-starter
Start MapLibre GL JS and Svelte easily.
blog
Building a Map Application with MapLibre GL JS and Svelte
Usage
Install package
npm install
Enter fullscreen mode
Exit fullscreen mode
code format
npm run format
Enter fullscreen mode
Exit fullscreen mode
build
npm run build
Enter fullscreen mode
Exit fullscreen mode
dev
npm run dev
Enter fullscreen mode
Exit fullscreen mode
Unit Tests
npm run test:unit
Enter fullscreen mode
Exit fullscreen mode
Lint
npm run lint
Enter fullscreen mode
Exit fullscreen mode
License
MIT
Copyright (c) 2023 MapLibre User Group Japan
Japanese
MapLibre GL JS & Svelte スターター
MapLibre GL JSとSvelteを手軽に始める
blog
MapLibre GL JSとSvelteを組み合わせた開発環境を構築してみた
使用方法
パッケージインストール
npm install
Enter fullscreen mode
Exit fullscreen mode
コードフォーマット
npm run format
Enter fullscreen mode
Exit fullscreen mode
ビルド
npm run build
Enter fullscreen mode
Exit fullscreen mode
開発
npm run dev
Enter fullscreen mode
Exit fullscreen mode
Unitテスト
npm run test:unit
Enter fullscreen mode
Exit fullscreen mode
リント
npm run lint
Enter fullscreen mode
Exit fullscreen mode
ライセンス
MIT
Copyright (c) 2023 MapLibre User Group Japan
Advance Preparation
Creating a Svelte project
Svelte #001 – environment setup with create-svelte
Execution environment
Install MapLibre GL JS
Install MapLibre GL JS into your Svelte project.
npm install maplibre-gl
Enter fullscreen mode
Exit fullscreen mode
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"
}
}
Enter fullscreen mode
Exit fullscreen mode
/src/routes
+layout.svelte
Delete the existing page and leave the slot tag.
<script lang= "ts" >
import ' ./styles.css ' ;
</script>
<slot />
<style></style>
Enter fullscreen mode
Exit fullscreen mode
/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>
Enter fullscreen mode
Exit fullscreen mode
/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>
Enter fullscreen mode
Exit fullscreen mode
Let's check with a simple local server.
npm run dev
Enter fullscreen mode
Exit fullscreen mode
You can display it using a combination of Svelte and MapLibre GL JS!
Related Articles
ReferencesMapLibre GL JS Svelte
Yasunori Kirimoto
