Vue2Leaflet Demo

by Michael Underwood

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue2-leaflet.min.js"></script>
<body>
  <div id="app">
    <div id="map">
      <l-map :zoom="zoom" :center="center" ref="map"  @click="test">
          <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
          <l-marker :lat-lng="marker"></l-marker>
      </l-map>
    </div>
    <div id="info">
      <p>Pan, zoom then click near the point. Points should be nearly the same. But they are not. If you zoom in the values are obviously not related to container</p>
      <p v-if="markerContainerPoint">Marker container point: <br>
        x: {{ markerContainerPoint.x }}, y: {{ markerContainerPoint.y }}
      </p>
      
      <p v-if="mouseContainerPoint">Mouse container point: <br>
        x: {{ mouseContainerPoint.x }}, y: {{ mouseContainerPoint.y }}
      </p>
    </div>
  </div>
</body>

CSS

html, body, #app {
  height: 100%;
  margin: 0;
}
#map {
  height: 100%;
  width: 70%;
}
#info {
  width: 28%;
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 999;
}

JavaScript

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


new Vue({
  el: '#app',
  components: { LMap, LTileLayer, LMarker },
  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.435220, -1.240482),
      markerContainerPoint: null,
      mouseContainerPoint: null,
    }
  },
  methods: {
  	test(e) {
    console.log("yo");
    	const map = this.$refs.map.mapObject;
      
     
      this.markerContainerPoint = map.latLngToContainerPoint(
          [47.435220, -1.240482]
        );
      
      this.mouseContainerPoint = map.mouseEventToContainerPoint(e.originalEvent);
      
    }
  }
});