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: '© <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 © Esri — 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 GeoJSON Data on Leaflet Map Using Vue JS