Documentation

Vue

Leaflet

Leaflet.js is a JavaScript library that makes it extremely easy to show maps on a webpage and interact with it. For more details

Installing via npm
npm i leaflet --save

OR

Direct <script> include

Another way is to directly include it in your html


<script src="../assets/vendor/Leaflet/leaflet.js"></script>
<script src="../assets/js/plugins/vector.js"></script>
<link rel='stylesheet' href="../assets/vendor/Leaflet/leaflet.css">

HTML Code

HTML Code for single input Date picker

<div id="map" style="height: 500px" class="w-full"></div>
Script for leaflet

const elem = document.getElementById('map')
if (elem) {
  const map = L.map(elem)
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
  }).addTo(map);
  map.setView([48.8584, 2.2945], 16);
  let eiffelMarker = L.marker([48.8584, 2.2945]).addTo(map);
  eiffelMarker.bindPopup("Eiffel Tower").openPopup();
}