Vue2Leaflet Map options regression

by Michael Underwood

HTML

<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.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<body>
  <div id="app">
    <l-map :zoom="zoom" :center="center">
      <l-tilelayer :url="url" :attribution="attribution"></l-tilelayer>
        <l-marker
          v-for="item in markers"
          :key="item.id"
          :lat-lng="item.latlng"
          @l-add="$event.target.openPopup()"
        >
        <l-popup :content="item.content"></l-popup>
      </l-marker>
    </l-map>
  </div>
  
  
  
  
</body>

CSS

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

JavaScript

new Vue({
  el: '#app',
  components: {
    'l-map': window.Vue2Leaflet.LMap,
    'l-tilelayer': window.Vue2Leaflet.LTileLayer,
    'l-marker': window.Vue2Leaflet.LMarker,
    'l-popup': window.Vue2Leaflet.LPopup
  },
  data() {
    return {
      zoom: 13,
      center: [55.66940, 12.568525],
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      markers: [
      	{
          id: 1,
          latlng: L.latLng(55.66940, 12.568525),
          content: 'Copenhagen office'

        },
        {
          id: 2,
          latlng: L.latLng(55.56197, 12.97629),
          content: 'Sweden Office'
        },
        ]
    }
  }
});