l-marker disapear when including a l-popup Vue3 component as child #361
Description
Hi there !
Is someone succeded to include a <l-popup> as a Vue component ?
When I'm using as it, the <l-marker> icon disapear 😕 (but still present by clicking on it).
Used packages :
- @vue-leaflet/vue-leaflet 0.10.1
- vue 3.3.4
Example of MyMap.vue component
<template>
<l-map ...>
...
<l-marker :latLng="..." >
<!-- NOT WORKING -->
<MyPopup></MyPopup>
</l-marker>
<l-marker :latLng="...">
<l-popup>Hello I'm working ! But not the other :(</l-popup>
</l-marker>
</l-map>
</template>
<script setup lang="ts">
import "leaflet";
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer, LMarker, LPopup } from "@vue-leaflet/vue-leaflet";
import MyPopup from '@/components/MyPopup.vue'
...
</script>Example of MyPopup.vue
<template>
<l-popup>
Hello I would like to work :'(
</l-popup>
</template>
<script setup lang="ts">
import { LPopup } from "@vue-leaflet/vue-leaflet";
</script>Thanks to Vue Leaflet Discord channels, I had a workaround to figure it out, including a <l-icon> into the <l-marker> scope ✨
Example of MyPopup.vue
<!-- NOT WORKING, icon disapear -->
<l-marker :latLng="..." >
<DummyPopup></DummyPopup>
</l-marker>
<!-- WORKAROUND set icon manually -->
<l-marker :latLng="..." >
<l-icon :icon-size="[48,48]" :icon-anchor="[24,48]" icon-url="start.svg" ></l-icon>
<DummyPopup></DummyPopup>
</l-marker>
<!-- NORMAL USAGEs -->
<l-marker :latLng="...">
<l-popup>Hello</l-popup>
</l-marker>You can find a code demo on this repository : https://github.com/Tatayoyoh/vue3-leaflet-popup-component