Disappearing Interactive components

[tobychidi]

When I place my map within a modal, the interactive components disappear. I have tried using client-only and other tinkering and nothing works except setting the pane for LCircle to markerPane. Need help 🙏🏾

Without setting pane:

After setting pane to "markerPane or higher"

My Code:

<div class="relative isolate h-[250px] w-full">
        <u-skeleton v-if="!isLocationReady" class="h-full" />
        <LMap v-else ref="map" class="h-full" :zoom="10" :center="latLng" :use-global-leaflet="false">
            <LTileLayer
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                layer-type="base"
                name="OpenStreetMap"
            />
            <LMarker :lat-lng="location" draggable />
            <LCircle :lat-lng="location" :radius />
        </LMap>
    </div>

Reproduction

On Stackblitz : Couldn't load the tile layer but if it loads the controls and paths hide behind it.

[Gugustinette]

The example you provided on StackBlitz seems to work fine for me, I do not understand what's wrong ?

[tobychidi]

The map tile didn't load on my stackblitz. How did you get it to load?

When the map loads in my project is when the circle disappears

[tobychidi]

This is what I get from Stackblitz

[Gugustinette]

Well that's weird, it could be a network error, make sure to check you console for that. But it's all fine on my side 😭

[tobychidi]

This seems to be the problem

[Gugustinette]

Weird origin network issue, but seems unrelated to the module then, can I close the issue ?

[tobychidi]

Not yet. This issue is different from the main issue. I'll create a repo instead.

[Gugustinette]

So what's the main issue ?

[tobychidi]

The interactive components disappear. The Stackblitz doesn't reproduce this issues because the map image doesn't load

[Gugustinette]

Well then yes I'll need a better reproduction

[tobychidi]

So, I have been testing. This issue doesn't have anything to do with modals. The zoom controls and a circle should be visible.

[Gugustinette]

k but I'll need a reproduction 😭

[tobychidi]

https://s3.fr-par.scw.cloud/volta/20240826_1246_58_3427594_0f02b9f9cc.mp4 This also happens when I scroll. Watch the zoom controls flicker. I'm trying so hard to figure this out. 😅

[tobychidi]

I don't have this issue when I use leaflet directly. Unfortunately, I cannot reproduce this, I cannot share the full project either. But I am not doing anything extra. My project has multiple nested pages.

---

• Operating System: Windows_NT
• Node Version: v20.15.0
• Nuxt Version: 3.13.0
• CLI Version: 3.13.0
• Nitro Version: 2.9.7
• Package Manager: pnpm@9.8.0
• Builder: -
• User Config: alias, build, future, experimental, watch, devtools, modules, gtag, runtimeConfig, routeRules, compatibilityDate
• Runtime Modules: @nuxt/ui@2.18.4, @pinia/nuxt@0.5.4, @nuxt/image@1.7.0, @vueuse/nuxt@11.0.3, nuxt-gtag@3.0.0, @nuxt/fonts@0.7.2, @nuxt/eslint@0.5.2

• Build Modules: -

[Gugustinette]

Well I won't be able to help you out without decent reproduction, it could really be related to anything at this point. 😕

[tobychidi]

My guess is that it is related to stacking/z-index. For some reason, the map is covering the buttons

[tobychidi]

I used vue-leaflet directly and the issue persists. You can close this.

[tobychidi]

More comments on this issue.

Leaflet is now my preferred mapping library for most use cases because it is lightweight, simple and easy to use. With this module, you have done a phenomenal job especially with documentaion and support. Thank you.

I have tested this issue and found it be caused not by this module or Vue-leaflet but with the main leaflet library.

My current solution is to add my own control components on the map (which I actually prefer) like so:

I also had to include :style={isolation: 'isolate} on LMap or else, even my custom buttons would disappear 😅

Leaflet V2 is on the way. I am hoping the update will make what's good even better. I will dropping an issue on the leaflet page as well.

Thanks.

[Gugustinette]

Thanks for the kind words !

Can't wait to see what's coming 😎