L-map, not displayed correctly, vue2leaflet in a framework7 popup

Question

i have the next popup

<f7-popup class="demo-popup" :opened="popupDetalle" @popup:closed="popupDetalle = false">
            <f7-page>
                <f7-navbar title="Editar servicio">
                <f7-nav-right>
                    <f7-link popup-close>Cerrar</f7-link>
                </f7-nav-right>
                </f7-navbar>
                <div id="app">
                   <l-map ref="mymap" :zoom="zoom" :center="center">
                      <l-tile-layer :url="url" :attribution="attribution"> 
                        </l-tile-layer>
                       <l-marker :lat-lng="marker.position"></l-marker>
                    </l-map>
                </div>
            </f7-page>
</f7-popup>

in my script:

<script>
import 'leaflet/dist/leaflet.css';
import { LMap, LTileLayer, LMarker, LPopup } from "vue2-leaflet";
export default {
    components:{
      LMap, 
      LTileLayer, 
      LMarker, 
      LPopup
     }
}
</script>

and css:

<style scoped>
    .appMap {
        width: 100%;
        height: 400px;
    }
</style>

and main.js:

import L from 'leaflet'
import { Icon } from 'leaflet'
import 'leaflet/dist/leaflet.css'

delete L.Icon.Default.prototype._getIconUrl

L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})

But visually it looks like this:

Basically I am guiding with the documentation, the css and its components are imported, guide https://korigan.github.io/Vue2Leaflet/#/quickstart.md

Answer 1

I suspect you'll find that Leaflet loads the map tiles correctly if you resize the browser window after the map is showing.

When the map is first created it'll be hidden so Leaflet won't know how big it is. You need to give it a kick once the popup is shown. Leaflet itself can watch for a browser window resize but it doesn't know anything about your popup.

You've already got ref="mymap" on the <l-map> so it should just be a matter of invalidating the size using:

this.$refs.map.mapObject.invalidateSize()

You'll need to find a suitable place to make that call, after the popup is showing. Timing is critical, if you call it too soon then the size will still be wrong and it won't help.

Initially you may want to add a button and put the invalidateSize call inside its click handler. Obviously this isn't an acceptable solution but it will allow you to see the effect of calling invalidateSize, confirming that this does fix the problem with the tiles not loading.