Vue2Leaflet Demo

by Michael Underwood

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue2-leaflet.js"></script>
<body>
  <div id="app">
    <l-map :zoom="zoom" :center="center" @click="mapClick">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>

      <!-- this throws error: !-->
      <l-circle-marker :lat-lng="marker" @click.stop="markerClick($event)"></l-circle-marker>
      <!-- this doesn't work: !-->
      <l-circle-marker :lat-lng="marker2" @click="markerClick"></l-circle-marker>
      
      <l-marker :lat-lng="marker3" @click.stop="markerClick($event)"></l-marker>
    </l-map>
  </div>
</body>

CSS

html, body, #app {
  height: 100%;
  margin: 0;
}

JavaScript

var { LMap, LTileLayer, LMarker, LMarker, LCircleMarker } = Vue2Leaflet;

new Vue({
  el: '#app',
  components: { LMap, LMarker, LTileLayer, LCircleMarker },
  data() {
    return {
      zoom:13,
      center: L.latLng(47.413220, -1.219482),
      url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      marker: L.latLng(47.413220, -1.23),
      marker2: L.latLng(47.413220, -1.21),
      marker3: L.latLng(47.423220, -1.22),
    }
  },
  methods: {
	  mapClick: function(){
      console.log('map click')
    },
    markerClick: function(e){
      // these don't stop mapClick from executing:
    	console.log('marker click');
      console.log(e.originalEvent.preventDefault());
    }
  }
});