vue2-leaflet-markercluster
vue2-leaflet-markercluster copied to clipboard
Spiderfy close on reactive/ref value change
template (in <l-map>
tag):
<v-marker-cluster>
<l-marker
v-for="poi in poisDataWithIcon"
:key="poi.id"
:lat-lng="[poi.latitude, poi.longitude]"
@click="handlePoiClick(poi.id, poi.latitude, poi.longitude)"
>
<template v-if="selectedPoiId !== poi.id">
<l-icon :icon-size="poi.icon.size" :shadow-size="poi.icon.shadow">
<marker-icon :color="poi.icon.color" />
</l-icon>
</template>
<template v-else>
<l-icon
:icon-size="selectedIcon.size"
:shadow-size="selectedIcon.shadow"
>
<marker-icon :color="selectedIcon.color" />
</l-icon>
</template>
</l-marker>
</v-marker-cluster>
<a-drawer
placement="bottom"
:closable="false"
:visible="isReportReady"
@close="hideReport"
height="14rem"
:bodyStyle="{
padding: '0',
}"
>
<template v-if="isReportReady">
{{ report }}
</template>
</a-drawer>
then in setup() - composition API:
const selectedIcon = {
size: [100, 120],
shadow: [40, 40],
color: '000000',
};
const report = ref<any>(null);
const selectedPoiId = ref<any>(null);
const isReportReady = ref(false);
function handlePoiClick(id: number, latitude: number, longitude: number) {
fetchReport(id);
selectedPoiId.value = id;
}
async function fetchReport(reportId: number) {
// in real case there is API call
report.value = reportId;
isReportReady.value = true;
}
function hideReport() {
isReportReady.value = false;
report.value = null;
selectedPoiId.value = null;
}
package.json versions:
"@nuxtjs/composition-api": "^0.12.5",
"nuxt": "2.14.6",
"ant-design-vue": "^1.6.5",
"leaflet-geosearch": "^3.0.6",
"leaflet": "^1.7.1",
"vue2-leaflet": "^2.6.0",
"vue2-leaflet-markercluster": "^3.1.0",
"nuxt-leaflet": "^0.0.22",
Hello guys, I have a problem with clusters after spiderfied. After spiderfied is activated and user clicks on Marker, we show them info about that marker in drawer. When drawer shows up, the spiderfy is automaticly closed (even it was just a marker click). Is there a way how to prevent closing spiderfy? Probably changing a reactive/ref variables that invokes component re-render is causing that. In this case (code snippet from real-case we are using), the changing refs are selectedPoiId, isReportReady and report
same issue here
Hi any update on this? Is there any quick fix or workaround? It affects all users using grouping functionality