NOTE: For more details about Vue.js, check out the official Vue.js 3 documentation.

Introduction

Vue.js 3 is a modern, fast, and lightweight JavaScript framework for building dynamic web interfaces.
In geospatial applications, Vue.js allows the development of interactive, intuitive, and high-performance mapping applications, particularly by integrating libraries like Leaflet, OpenLayers, or MapLibre.

Why use Vue.js in Geomatics?

  • Ease of use: accessible syntax for beginners.
  • Reactivity: automatic management of interface updates when data changes.
  • Reusable components: ideal for modularizing map elements (maps, side panels, legends…).
  • Compatibility with the Web GIS ecosystem: easy integration with JavaScript mapping libraries.
  • Performance: lightweight and fast architecture, even for large geospatial applications.

Prerequisites for Getting Started

Before using Vue.js 3 for geospatial projects:

  • Solid knowledge of HTML, CSS, JavaScript.
  • Understanding of REST APIs and mapping services (WMS, WFS, WMTS).
  • Good knowledge of web mapping libraries.

Quick Setup of a Vue.js 3 Project

npm create vite@latest my-vue-project -- --template vue
cd my-vue-project
npm install
npm run dev

This will create a minimal Vue.js 3 app ready to be developed.

Integrating a Map with Vue.js

Here’s an example of integrating Leaflet into a Vue component:

1. Install Leaflet

npm install leaflet

2. Example of Map.vue component

<template>
  <div id="map" style="height: 500px;"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import L from 'leaflet'

onMounted(() => {
  const map = L.map('map').setView([48.8566, 2.3522], 13)

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map)
})
</script>

<style>
#map {
  width: 100%;
  height: 500px;
}
</style>

Example of a Geomatics Vue.js Application Architecture

src/
├── components/
│   ├── MainMap.vue
│   ├── SearchBar.vue
│   └── ResultsList.vue
├── services/
│   └── api.js (access to WFS, REST services, etc.)
├── views/
│   └── Home.vue
├── App.vue
└── main.js

Each component can represent a functional part of your application (map, address search form, dynamic results, etc.).

Use Cases in Geomatics

  • Visualization of spatial layers from a WMS/WFS server
  • Search and display addresses via a geocoding service
  • Route calculation and display with routing APIs (OSRM, GraphHopper)
  • Display of real-time spatial analysis (buffers, isochrones)

Best Practices

  • Separate business logic (APIs, geoservices) from display components.
  • Use state stores (Pinia or Vuex) to centralize shared geospatial data.
  • Optimize performance (limit unnecessary map reloads).
  • Use specialized libraries (vue-leaflet, vue3-openlayers) to speed up development.

Useful Resources