Get started with Vue2Leaflet CDN

MIT licensed

Vue2Leaflet is a Vue.js plugin for integrating Leaflet maps.

Tags:
  • vue
  • leaflet
  • map
  • vuejs

Stable version

Copied!

How to start using Vue2Leaflet CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with Vue2Leaflet CDN - cdnhub.io</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
  <script src="https://cdn.cdnhub.io/Vue2Leaflet/2.7.1/vue2-leaflet.min.js"></script>
</head>
<body>
  <div id="app">
    <div id="map" style="height: 400px; width: 100%;"></div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        map: null,
      },
      mounted() {
        this.map = new L.Map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        }).addTo(this.map);

        this.$refs.map = this.map;
      },
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions