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 management of 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 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, 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 the Final 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.