Leaflet in Dashboard Widget ( with vue-grid-layout) doesn't center

[CharlotteAndre]

Hi,

I created a Dashboard using vue-grid-layout and used leaflet as one of my widget. Problem occured when I try to instanciate the widget, the map is actually not centered. However, update is done if I resize by navigator windows or if I open devtools or if I directly change center lat and long parameter in my code... any idea ?

Here is my code :

<template>
  <div class="mt-4">
    <l-map ref="map"
           :zoom="zoom"
           :center="center"
           @update:zoom="zoomUpdated"
           @update:center="centerUpdated"
           style="height: 360px; width: 100%"
    >
      <l-tile-layer
          :url="url"
      />
      <l-marker :lat-lng="marker"/>
    </l-map>
  </div>
</template>

<script>
import {LMap, LTileLayer, LMarker} from "vue2-leaflet";

export default {
  name: "MapWidget",
  components: {
    LMap,
    LTileLayer,
    LMarker,
  },
  data() {
    return {
      url: "https://{s}.tile.osm.org/{z}/{x}/{y}.png",
      zoom: 8,
      center: [0, 0],
      marker: [48.771667, -3.968333]
    };
  },
  watch: {
    center() {
      this.centerUpdated(this.center)
    }
  },
  mounted() {
    this.center = [48.771667, -3.968333]
  },
  methods: {
    zoomUpdated(zoom) {
      this.zoom = zoom;
      console.log(this.markers)
    },
    centerUpdated(center) {
      this.center = center;

    }
  }
};
</script>

Browsers Affected

Chrome
Firefox
Edge

Versions

• Leaflet: v1.7.1
• Vue: v2.6.11
• Vue2Leaflet: v2.7.1