Leaflet Maps 🌳 ​
Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Read the official Leaflet Documentation for a full list of instructions and other options.
Installation in index.html ​
html
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>Usage in Vue File ​
vue
<template>
<div id="map" style="height:600px;border-radius: 12px">
</div>
</template>
<script>
export default {
components: {},
data() {
return {
zoom: 2,
};
},
mounted() {
var map = L.map('map').setView([23.80, 90.37], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
}
}
</script>