How To Display a Leaflet Map Using Vue JS Framework.

The development of web applications is becoming more and more complex yet requirements for the user interface to be reactive is becoming the state of the art. To ease the complexity of building web GIS applications, it is necessary to find ways which will enhance code modularization, scalability and maintenance. One of the ways to achieve this is through the use of modern JavaScript frameworks like Vue JS alongside mapping libraries like leaflet. Vue JS is lightweight, making this one of the core principles of its design. Compared to other frameworks like Angular and React, Vue JS has the smallest bundle size among all the three frameworks. It is for this reason that Vue Js has become popular.

Moreover, it is easy to add Vue to an existing project. Its template syntax is similar to HTML, therefore converting existing code is much easier. Vue was inspired by the other two frameworks, i.e. Angular and React. The concept of components was borrowed from React while directives and two way data binding was borrowed from Angular. Simply put, Vue is a hybrid of the two frameworks because the best parts of each of the two frameworks were taken to come up with an excellent balance of features.

This article will focus on integrating Vue JS with Leaflet and outlining step by step process of displaying a leaflet map using Vue Js.

Install NPM.

Npm is the world’s largest registry used for management of development, sharing and borrowing of packages. Also, npm helps to download and use standalone tools. In this case, we will use npm to install some of the dependencies like leaflet, vue and vue2leaflet. To install npm:

  1. Open command prompt
  2. On the command line interface, run the following code:
npm install

Press Enter to run

Install Dependencies.

In this case, the dependencies that will be used include leaflet, vue and vue2leaflet. On the CLI, run the following code:

npm install leaflet vue2-leaflet –save

Use the installed dependencies.

In your local components, open the App.vue and Main.vue files. In the App.vue file, type the following code inside the <template> tags to add the container for the map display.

<template>
  <div id="app" style="height: 100vh; width: 100%">
   
    <l-map
     
      :zoom="zoom"
      :center="center"
      :options="mapOptions"
      style="height: 100%"
      
    >
      <l-tile-layer
        :url="url"
        :attribution="attribution"
      />
      
      
    </l-map>
  </div>
</template>

Inside the script tags, import the previously installed dependencies.

import { latLng } from "leaflet";
import { LMap, LTileLayer} from 'vue2-leaflet';

export default {
  name: 'MyLeafletMap',
  components: {
    LMap,
    LTileLayer,
    
  },
   data() {
    return {
      zoom: 13,
      center: latLng(-1.3, 36.8),
      url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
attribution:
            'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
      withPopup: latLng(-1.3, 36.8),
      withTooltip: latLng(-1.3, 36.8),
      currentZoom: 11.5,
      currentCenter: latLng(-1.3, 36.8),
      mapOptions: {
        zoomSnap: 0.5
      },
     
    };
  },
};

Apply CSS styling to the map container

#app {
  height: 100vh;
   width: 100%;
 
} 

In the main.js file, import the leaflet css styling.

import 'leaflet/dist/leaflet.css';

Run the code and display final results.

To run the code, open the terminal of your text editor, type the following code and press enter.

npm run serve

Results

Previous Post
Next Post

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.