Display GeoJSON Data on Leaflet Map Using Vue JS

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

Install NPM

Npm is the world’s largest registry used for the management of the development, sharing, and borrowing of packages. Moreover, 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 a command prompt

2. On the command line interface, run the following code

npm install

3. Press Enter to run

Install Dependencies

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

npm install leaflet vue2-leaflet --save

Set up the map container

In your App.vue file, set up the map container which will be used for the display of the map tiles and the geoJSON layer. To display the geoJSON layer, insert the <l-geo-json> tags inside the map tags.

In the template tags, insert the following code:

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

Inside the <script> tags, import the installed dependencies

import { latLng} from "leaflet";
import {LMap, LTileLayer, LGeoJson} from 'vue2-leaflet';
export default {
  name: 'MyMap',
  components: {
    LMap,
    LTileLayer,
    LGeoJson
    
  },
   data() {
    return {
      zoom: 12,
      center: latLng(1.3, 36.8),
     url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
     attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      url2: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
      
        attribution2:
        'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
        geojson: null,
      currentZoom: 11.5,
      currentCenter: latLng(0.02, 37),
    
      showParagraph: false,
      mapOptions: {
        zoomSnap: 0.5
      },
      showMap: true
    }
    
     
  },
}

Load your locally hosted Geojson file

Using the async function and the fetch API, fetch your Geojson data and load it to the map. In this case, the map.geojson file is fetched from the project folder, which includes an array of some of the national parks in Kenya.

async created () {
    const response = await fetch('map.geojson');
    this.geojson = await response.json();
  },

Display of the Final Results

map using Vue Js
A map using Vue JS

Leave a Reply

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

Risper Mutinda

Hello. I am Risper Mutinda. I am a passionate Web and GIS Developer but more importantly, I am passionate about Technology.

More Reading

Post navigation