0

I have been following the vue2-leaflet documentation and I have managed to render my map.

However , it only covers a portion of the entire frame.

I don't know what else to do in order to render it completely.

enter image description here

<l-map
   ref="locationsMap"
   style="height: 300px"
   :zoom="zoom"
   :center="center"
>
    <l-tile-layer
       :url="url"
       :attribution="attribution"
    ></l-tile-layer>
    <l-marker :lat-lng="markerLatLng"></l-marker>
</l-map>

I have read something about using invalidateSize(); in a similar issue (Leaflet map doesn't cover whole map area) but I don't see what the point is or how to use it.

kissu
  • 40,416
  • 14
  • 65
  • 133
Simao
  • 371
  • 2
  • 13
  • Isn't this coming from the `height: 300px` part? Did you inspect the thing with your browser devtools? – kissu Sep 15 '22 at 14:09
  • Hi, I solved it running this function ```this.$refs.locationsMap.mapObject.invalidateSize();```. I am not sure what is exactly is causing the issue but this solves it – Simao Sep 15 '22 at 14:12

0 Answers0