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
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
使用方法
パッケージインストール
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.
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
Building a Map Application with MapLibre GL JS and Svelte
Yasunori Kirimoto for MapLibre User Group Japan ・ Sep 21
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
References
MapLibre GL JS
Vue.js
Top comments (0)