Leaflet Maps in Vue.js

Here, We will learn how to create leaflet map in vue.js

Step 1: Install the following packages:

npm i leaflet
npm i vue2-leaflet

Step 2: Open main.js file and add the following in it:

import Vue from "vue";
import App from "./App.vue";
import "leaflet/dist/leaflet.css";

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

Step 3: Open App.vue file and add the following in it:

<template>
  <div id="app">
    <l-map style="height: 300px" :zoom="zoom" :center="center">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-marker :lat-lng="markerLatLng"></l-marker>
    </l-map>
  </div>
</template>
<script>
import { LMap, LTileLayer, LMarker } from "vue2-leaflet";

export default {
  components: {
    LMap,
    LTileLayer,
    LMarker,
  },
  data() {
    return {
      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      attribution:
        '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 15,
      center: [51.505, -0.159],
      markerLatLng: [51.504, -0.159],
    };
  },
};
</script>

Code in Action: