14.8 C
Friday, September 30, 2022

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 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 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:

  <div id="app" style="height: 100vh; width: 100%">
   <div class="map">
      style="width: 100vw; height: 100%"
      <l-geo-json :geojson="geojson"></l-geo-json>

Inside the <script> tags, import the installed dependencies.

import { latLng} from "leaflet";
import {LMap, LTileLayer, LGeoJson} from 'vue2-leaflet';
export default {
  name: 'MyMap',
  components: {
   data() {
    return {
      zoom: 12,
      center: latLng(1.3, 36.8),
     url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        '&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}',
        '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

GeoJSON data in maps

Join Our Mailing List

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

Related Articles


Please enter your comment!
Please enter your name here

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

Stay Connected

- Advertisement -

Join Our Mailing List

Latest Articles