jperelli / vue2-leaflet-markercluster

markercluster plugin extension for vue2-leaflet package
MIT License
132 stars 55 forks source link

Spiderfy close on reactive/ref value change #53

Open martsim6 opened 3 years ago

martsim6 commented 3 years ago

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)

martinlistiak commented 3 years ago

same issue here

venzeo commented 3 years ago

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