Clustering

Give annotations a shared clustering-identifier and MapKit groups nearby pins automatically. The cluster-annotation prop on VMap controls how each group renders. Zoom in to split clusters apart.

Clustering.vue

<script setup lang="ts">
  import { VMap, VMarkerAnnotation } from '@geoql/v-mapkit';

  function clusterAnnotation(cluster) {
    return new mapkit.MarkerAnnotation(cluster.coordinate, {
      color: '#0a84ff',
      glyphText: String(cluster.memberAnnotations.length),
    });
  }
</script>

<template>
  <VMap :access-token="token" :cluster-annotation="clusterAnnotation">
    <VMarkerAnnotation
      v-for="m in markers"
      :key="m.id"
      :coordinates="m.at"
      clustering-identifier="places"
    />
  </VMap>
</template>