Integração vue2-leafleft e Leaflet Routing Machine

meio meia boca mas tá aí

by giordanna

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>
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css">
<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
<body>
  <div id="app">
    <l-map :zoom="zoom" :center="center" ref="map">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    </l-map>
  </div>
</body>

CSS

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

JavaScript

var { LMap, LTileLayer, LMarker } = Vue2Leaflet;

new Vue({
  el: '#app',
  components: { LMap, LTileLayer, LMarker },
  data() {
    return {
      zoom:6,
      center: L.latLng(38.7436056, -2.2304153),
      url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }
  },
  mounted() {
  	L.Routing.control({
      waypoints: [
        L.latLng(38.7436056, -9.2304153),
        L.latLng(38.5334477, -0.1312811)
      ]
    }).addTo(this.$refs.map.mapObject)
  }
});