Using Leaflet to build a map in your Vue component

Leaflet is a leading open-source JavaScript library for mobile-friendly interactive maps. The way to use Leaflet in Vue components is simple. This article shares some ways to add the map and the elements on the map by using Leaflet API in a Vue component. Let’s dive in!

The Setup and Basic Usage

• Install Leaflet

Running npm or yarnto install Leaflet in your application.

npm install leaflet

• Import Leaflet

Importing it in the Vue component that you would like to add a map.

// App.vue

import L from 'leaflet';

• Create the map

Adding the map with openstreet tile layer as background in the Vue component.

// App.vue

<template>
  <div id="map"></div>
</template>

<script>
import L from 'leaflet';

let openStreetMap = {};

export default {
...
  mounted() {
   openStreetMap = L.map('map', {
     center: [0, 0],
     zoom: 1,
   });
  
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a…