Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Spiderfy close on reactive/ref value change #53

Open
martsim6 opened this issue Dec 10, 2020 · 2 comments
Open

Spiderfy close on reactive/ref value change #53

martsim6 opened this issue Dec 10, 2020 · 2 comments

Comments

@martsim6
Copy link

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
Copy link

same issue here

@venzeo
Copy link

venzeo commented Mar 22, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants