DEV Community

Cover image for Building a Map Application with MapLibre GL JS and Vue.js (script setup)
MapLibre User Group Japan profile image Yasunori Kirimoto
Yasunori Kirimoto for MapLibre User Group Japan

Posted on • Edited on

Building a Map Application with MapLibre GL JS and Vue.js (script setup)

#maplibre #vue #vite #foss4g

img

I built a development environment combining MapLibre GL JS and Vue.js (script setup) 🎉

The created environment is available on GitHub. Please use it!

GitHub logo mug-jp / maplibregljs-vue-starter

Start MapLibre GL JS and Vue.js easily. [MapLibre GL JS, Vue.js, Vite]

maplibregljs-vue-starter

README02

Start MapLibre GL JS and Vue.js easily.


blog

Building a Map Application with MapLibre GL JS and Vue.js (script setup)


Usage

README03


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


README01


License

MIT

Copyright (c) 2023 MapLibre User Group Japan



Japanese


MapLibre GL JS & Vue.js スターター

README02

MapLibre GL JSとVue.jsを手軽に始める


blog

MapLibre GL JSとVue.js(script setup)を組み合わせた開発環境を構築してみた


使用方法

README03


パッケージインストール

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


README01


ライセンス

MIT

Copyright (c) 2023 MapLibre User Group Japan



View on GitHub


Advance Preparation

  • Creating a Vue.js project

Vue.js #006 - environment setup with create-vue

img

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
Enter fullscreen mode Exit fullscreen mode

img

Building the map application

Finally, let's build the actual map application. Change or delete some files from the template.

Overall composition
img

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!
Image description

Related Articles

MapLibre User Group Japan

Building a Map Application with MapLibre GL JS and Svelte

Yasunori Kirimoto for MapLibre User Group Japan ・ Sep 21 '23

#maplibre #svelte #gis #foss4g
AWS Heroes

Vite Support for Various Map Library Starters

Yasunori Kirimoto for AWS Heroes ・ Jun 29 '22

#amazonlocationservice #maplibre #leaflet #vite
MIERUNE

COMTiles (Cloud Optimized Map Tiles) hosted on Amazon S3 and Visualized with MapLibre GL JS

Yasunori Kirimoto for MIERUNE ・ Dec 23 '22

#foss4g #maplibre #s3 #cloudoptimized
MIERUNE

Trying Out Various Turf.js

Yasunori Kirimoto for MIERUNE ・ Jul 19 '23

#turf #turfjs #foss4g #gis
AWS Heroes

Amazon Location Service and AWS Amplify to Use Various Map Library

Yasunori Kirimoto for AWS Heroes ・ Jan 5 '23

#amazonlocationservice #amplify #aws #foss4g

References
MapLibre GL JS
Vue.js

Top comments (0)

Read next

webcraft-notes profile image

Final Touches: Prepping Your Nuxt.js E-Commerce Store for Production

WebCraft Notes -

mkp_bijit profile image

Spring Boot with VueJS with Spring Security

Bijit Mondal -

nik-bogachenkov profile image

Building Micro Frontends with Vite, React, and TypeScript: A Step-by-Step Guide

Nik Bogachenkov -

jacobandrewsky profile image

Implementing Prefetching in Vue apps

Jakub Andrzejewski -