I built a development environment combining MapLibre GL JS and Vue.js (script setup) 🎉
The created environment is available on GitHub. Please use it!
Start MapLibre GL JS and Vue.js easily. [MapLibre GL JS, Vue.js, Vite]
maplibregljs-vue-starter
Start MapLibre GL JS and Vue.js easily.
blog
Building a Map Application with MapLibre GL JS and Vue.js (script setup)
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
End-to-End Tests
npm run test:e2e:dev
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 & Vue.js スターター
MapLibre GL JSとVue.jsを手軽に始める
blog
MapLibre GL JSとVue.js(script setup)を組み合わせた開発環境を構築してみた
使用方法
パッケージインストール
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
E2Eテスト
npm run test:e2e:dev
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 Vue.js project
Vue.js #006 - environment setup with create-vue
Execution environment
Install MapLibre GL JS
Install MapLibre GL JS into your Vue.js 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-vue-starter" ,
"version" : "1.0.0" ,
"private" : true ,
"scripts" : {
"dev" : "vite" ,
"build" : "run-p type-check \" build-only {@} \" --" ,
"preview" : "vite preview" ,
"test:unit" : "vitest" ,
"test:e2e" : "start-server-and-test preview http://localhost:4173 'cypress run --e2e'" ,
"test:e2e:dev" : "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'" ,
"build-only" : "vite build" ,
"type-check" : "vue-tsc --noEmit -p tsconfig.vitest.json --composite false" ,
"lint" : "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" ,
"format" : "prettier --write src/"
},
"keywords" : [],
"author" : "MapLibre User Group Japan" ,
"license" : "ISC" ,
"dependencies" : {
"maplibre-gl" : "^3.3.1" ,
"pinia" : "^2.1.6" ,
"vue" : "^3.3.4" ,
"vue-router" : "^4.2.4"
},
"devDependencies" : {
"@rushstack/eslint-patch" : "^1.3.3" ,
"@tsconfig/node18" : "^18.2.2" ,
"@types/jsdom" : "^21.1.2" ,
"@types/node" : "^18.17.15" ,
"@vitejs/plugin-vue" : "^4.3.4" ,
"@vue/eslint-config-prettier" : "^8.0.0" ,
"@vue/eslint-config-typescript" : "^12.0.0" ,
"@vue/test-utils" : "^2.4.1" ,
"@vue/tsconfig" : "^0.4.0" ,
"cypress" : "^13.2.0" ,
"eslint" : "^8.49.0" ,
"eslint-plugin-cypress" : "^2.14.0" ,
"eslint-plugin-vue" : "^9.17.0" ,
"jsdom" : "^22.1.0" ,
"npm-run-all" : "^4.1.5" ,
"prettier" : "^3.0.3" ,
"start-server-and-test" : "^2.0.0" ,
"typescript" : "~5.1.6" ,
"vite" : "^4.4.9" ,
"vitest" : "^0.34.4" ,
"vue-tsc" : "^1.8.11"
}
}
Enter fullscreen mode
Exit fullscreen mode
/src
App.vue
Remove the existing page and use only the router.
< script setup lang= "ts" >
import { RouterView } from ' vue-router '
</ script >
< template >
<RouterView />
</ template >
< style scoped ></ style >
Enter fullscreen mode
Exit fullscreen mode
/src/assets
main.css
Reset existing CSS in App.vue.
@import './base.css' ;
html ,
body ,
#app {
color : black ;
}
a ,
.green {
text-decoration : none ;
color : hsla ( 160 , 100% , 37% , 1 );
transition : 0.4s ;
}
@media ( hover : hover ) {
a : hover {
background-color : hsla ( 160 , 100% , 37% , 0.2 );
}
}
Enter fullscreen mode
Exit fullscreen mode
/src/router
index.ts
Change the existing router to HomeView only.
import { createRouter , createWebHistory } from ' vue-router '
import HomeView from ' ../views/HomeView.vue '
const router = createRouter ({
history : createWebHistory ( import . meta . env . BASE_URL ),
routes : [
{
path : ' / ' ,
name : ' home ' ,
component : HomeView
}
]
})
export default router
Enter fullscreen mode
Exit fullscreen mode
/src/views
HomeView.vue
Change to load the map component.
< script setup lang= "ts" >
import MapPane from ' ../components/MapPane.vue '
</ script >
< template >
<main>
<MapPane />
</main>
</ template >
Enter fullscreen mode
Exit fullscreen mode
/src/components
MapPane.vue
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 { onMounted } from ' vue '
onMounted (() => {
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 >
< template >
<div id= "map" ></div>
</ template >
< style scoped >
#map {
height : 100vh ;
}
</ style >
Enter fullscreen mode
Exit fullscreen mode
Let's check with a simple local server.
npm run serve
Enter fullscreen mode
Exit fullscreen mode
You can display it using a combination of Vue.js (script setup) and MapLibre GL JS!
Related Articles
ReferencesMapLibre GL JS Vue.js
Yasunori Kirimoto
