Vue Layers Map not showing on Vuetify dialog

Question

I'm working on a Vuetify application that uses Vue-Layers to display OpenStreetMap maps.

Works fine at page level but I have a full screen Vuetify dialog that I want to be able to select map points from.

The map does not get displayed.

The code for the dialog is:

<template>
  <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
    <template v-slot:activator="{ on }">
      <v-btn color="primary" dark v-on="on">Create PID Group</v-btn>
    </template>
    <v-toolbar
        color="black"
        dark
        fixed
    >
      <v-toolbar-side-icon @click="dialog=false">
        <v-icon>close</v-icon>
      </v-toolbar-side-icon>
      <v-toolbar-title>Create PID Group</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items>
        <v-btn dark flat @click="onSave">Save</v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <div class="mapContainer" style="background-color: pink">
      <v-sheet>

        <vl-map
            :load-tiles-while-animating="true"
            :load-tiles-while-interacting="true"
            @click="clickCoordinate = $event.coordinate"
            :controls="false"
            class="minimap"
            :z-index="100000"
        >
          <vl-view :zoom.sync="zoom" :rotation.sync="rotation"></vl-view>

          <vl-layer-tile id="osm">
            <vl-source-osm></vl-source-osm>
          </vl-layer-tile>
        </vl-map>
      </v-sheet>
    </div>
  </v-dialog>
</template>

<script>
  export default {
    name: "CreatePidGroupDialog",
    data() {
      return {
        dialog: false,
        zoom: 16,
        rotation: 0,
        clickCoordinate: undefined,
      }
    },
    methods: {
      onSave() {
        this.dialog = false
      },
    },
  }
</script>

<style scoped>
  .mapContainer {
    position: relative;
    width: 100%;
    height: 100vh;
  }

  .minimap {
    height: 168px;
    width: 300px;
    border: 1px solid black;
  }

</style>

The map container definitely has size of 300px by 168px

There are no console errors displayed in Chrome developer tools.

Why doesn't the map show?

Answer 1

I had the same problem, figured out you need to refresh the map when the dialog is shown. Put a ref="map" on the vl-map component and do the following (in typescript):

    this.dialog = true; // show the dialog
    // at the next tick refresh the map so you are sure it detects it is now visible
    this.$nextTick(() => {
      (this.$refs.map as any).refresh();
    });

Answer 2

I am on Vue2.x + Vuetify + Vue2leaflet.

I tried many things and finally what worked for me was to cover the with a . My code reads as :

<v-lazy>
  <v-img>
    <l-map>
     .... rest of the code
    </l-map>
  </v-img>
</v-lazy>

This takes inputs on v-lazy from https://medium.com/@elralimi.lamia/leaflet-vuejs-vuetify-map-not-showing-well-in-a-modal-with-grey-parts-9a5d551ea472. v-img was suggested in some other SO response.

Other options that I tried but failed were: this.map.invalidateSize(); , this.map.remove();, this.$nextTick(() => {...}.