vue2-leaflet-markercluster icon indicating copy to clipboard operation
vue2-leaflet-markercluster copied to clipboard

Spiderfy close on reactive/ref value change

Open martsim6 opened this issue 4 years ago • 2 comments

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

ezgif com-video-to-gif (1)

martsim6 avatar Dec 10 '20 13:12 martsim6

same issue here

martinlistiak avatar Jan 25 '21 15:01 martinlistiak

Hi any update on this? Is there any quick fix or workaround? It affects all users using grouping functionality

venzeo avatar Mar 22 '21 09:03 venzeo