Leaflet+Vue+Vuetify / Leaflet map hide vuetify popup dialog

user_8971706 0
Viewed 4539

On my Vuetify + Lealflet project the map hides all popup dialogs and I don't know why. I use Vue2Leaflet library. I am a beginner with web development. Here is a pic of the problem:

enter image description here

               <l-map
                                :center="center"
                                :zoom="zoom"
                                @click.right="mapRclicked"
                                ref="map"
                                style="height: 50vh; width: 50vh"
                >
leaflet vuetify.js vue.js
4 Answers

The problem is a clash of z-index ranges. Vuetify uses z-index ranges 0-10 while leaflet uses the range 100-1100. Fortunately, the z-index of a child element is relative to the z-index of their parent.

I advice you to give l-map a z-index of 0 like this.

<l-map
  :center="center"
  :zoom="zoom"
  @click.right="mapRclicked"
  ref="map"
  style="z-index: 0; height: 50vh; width: 50vh"
>

This will automatically bring your component in line with all of Vuetify z-indexes. In contrast, @bgsuello workaround requires that you modify the z-index of every Vuetify component that may conflict with the map, including other dialogs, menus, animations, tabs, toolbars, snackbars...

user_57311440

Edit: This is an outdated answer.

see @Javier answer below as pointed out by @ondrejsv on comment.

It does not work anymore at least in Vuetify 2.1.9 and Vue 2.6.x. The solution by Javier seems to work.

Increase the z-index style property of your dialog.

<v-dialog style="z-index:9999;"
... rest of your code ...
user_45397480

I find it quite practical to wrap the map in an image, like this

<v-img
  height="100%"
  width="100%">
    <l-map>
    ... 
    </l-map>
</v-img>

This way there is no need to do anything with the z-index.

user_85558720

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 by geomuc in the above response.

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

user_49202430
Related