I built a development environment combining MapLibre GL JS and Vue.js (script setup) 🎉
The created environment is available on GitHub. Please use it!
mug-jp
/
maplibregljs-vue-starter
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.
- MapLibre GL JS v3.3.1
- Vue.js v3.3.4
- node v20.6.1
- npm v9.8.1
blog
Building a Map Application with MapLibre GL JS and Vue.js (script setup)
Usage
Install package
npm install
code format
npm run format
build
npm run build
dev
npm run dev
Unit Tests
npm run test:unit
End-to-End Tests
npm run test:e2e:dev
Lint
npm run lint
License
MIT
Copyright (c) 2023 MapLibre User Group Japan
Japanese
MapLibre GL JS & Vue.js スターター
MapLibre GL JSとVue.jsを手軽に始める
- MapLibre GL JS v3.3.1
- Vue.js v3.3.4
- node v20.6.1
- npm v9.8.1
blog
MapLibre GL JSとVue.js(script setup)を組み合わせた開発環境を構築してみた
使用方法
パッケージインストール
npm install
コードフォーマット
npm run format
ビルド
npm run build
開発
npm run dev
Unitテスト
npm run test:unit
E2Eテスト
npm run test:e2e:dev
リント
npm run lint
ライセンス
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
- node v20.6.1
- npm v9.8.1
Install MapLibre GL JS
Install MapLibre GL JS into your Vue.js 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-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"
}
}
/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>
/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);
}
}
/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
/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>
/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>
Let's check with a simple local server.
npm run serve
You can display it using a combination of Vue.js (script setup) and MapLibre GL JS!
Related Articles
References
MapLibre GL JS
Vue.js
Top comments (0)