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>
        <!-- OFFICES -->
      <l-marker
        v-for="office in offices"
        :key="office.id"
        :lat-lng="office.latlng"
        @l-add="$event.target.openPopup()"
        :icon="office_icon"
      >
        <l-popup :content="office.content"></l-popup>
      </l-marker>

      <!-- FACTORIES -->
      <l-marker
        v-for="factory in factories"
        :key="factory.id"
        :lat-lng="factory.latlng"
        @l-add="$event.target.openPopup()"
        :icon="factory_icon"
      >
        <l-popup :content="factory.content"></l-popup>
      </l-marker>

      <!-- WAREHOUSES -->
      <l-marker
        v-for="warehouse in warehouses"
        :key="warehouse.id"
        :lat-lng="warehouse.latlng"
        @l-add="$event.target.openPopup()"
        :icon="warehouse_icon"
      >
        <l-popup :content="warehouse.content"></l-popup>
      </l-marker>
      </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: 4,
      center: [45.413220, 10.219482],
      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.56197, 12.97629),
          content: 'Sweden Office'
        },
        {
          id: 2,
          latlng: L.latLng(55.66940, 12.568525),
          content: 'Copenhagen office'
        },
        {
          id: 3,
          latlng: L.latLng(52.30136, 4.86619),
          content: 'Netherland office'
        },
        {
          id: 4,
          latlng: L.latLng(50.87308, 4.28677),
          content: 'End market office, Belgium'
        },
        {
          id: 5,
          latlng: L.latLng(50.84186, 4.37323),
          content: 'EU office, Belgium'
        },
        {
          id: 6,
          latlng: L.latLng(51.49664, -0.27428),
          content: 'NWEA & End Market, UK'
        },
        {
          id: 7,
          latlng: L.latLng(53.59827, -2.29314),
          content: 'Retail office, UK'
        },
        {
          id: 8,
          latlng: L.latLng(53.27677, -6.21794),
          content: 'Apex building, Ireland'
        }
      ],
      
      //OFFICES
      office_icon: icon({
        iconUrl: "https://image.flaticon.com/icons/svg/717/717940.svg",
        iconSize: [32, 37],
        iconAnchor: [16, 37]
      }),
      offices: [
        {
          id: 1,
          latlng: latLng(55.56197, 12.97629),
          content: `<img src=''>Sweden Office`
        },
        {
          id: 2,
          latlng: latLng(55.6694, 12.568525),
          content: `<img src=''>Bernstorffsgade 50, 1577 Copenhagen`
        },
        {
      ...