<MapboxSupercluster>

A component that implements supercluster functionality for efficient point clustering in Mapbox maps.

Added since: v0.1.0

Last changed: 1 month ago

Usage

MapboxSupercluster is a component that implements the Supercluster algorithm for efficient point clustering in Mapbox maps. It provides a way to handle large datasets of points by clustering them based on zoom levels and viewport bounds.

The component is used to manage point clustering in a Mapbox map, automatically handling the clustering logic and providing both individual markers and clusters through slots.

Basic example

MapComponent.vue

<template>
  <MapboxMap>
    <MapboxSupercluster :features="points">
      <template #marker="{ feature }">
        <MapboxMarker :feature="feature">
          <!-- Custom marker content -->
        </MapboxMarker>
      </template>
      <template #cluster="{ feature }">
        <MapboxClusterMarker :feature="feature">
          <!-- Custom cluster content -->
        </MapboxClusterMarker>
      </template>
    </MapboxSupercluster>
  </MapboxMap>
</template>

Type Definition

type MapboxSuperclusterProps
 = {
    /**
     * The point and cluster features to display on the map.
     * @see {@link PointFeature|PointFeature}
     * @see {@link ClusterFeature|ClusterFeature}
     */
    features
?: Array
<PointFeature
<any> | ClusterFeature
<any>>;
};

type MapboxSuperclusterContext
 = {
    /**
     * The Supercluster instance
     * @see {@link Supercluster}
     */
    supercluster
: Ref
<Supercluster
 | undefined>;
    /**
     * The markers
     * @see {@link PointFeature|PointFeature}
     */
    markers
: Ref
<Array
<PointFeature
<any>>>;
    /**
     * The clusters
     * @see {@link ClusterFeature|ClusterFeature}
     */
    clusters
: Ref
<Array
<ClusterFeature
<any>>>;
};

API Reference

Props

Prop	Default	Type
`features`		`Array<PointFeature<any> \| ClusterFeature<any>>` The point and cluster features to display on the map.

Slots

Slot	Payload
`marker`	`{ id: string, feature: PointFeature<any> }` Slot for rendering individual markers
`cluster`	`{ id: string, feature: ClusterFeature<any> }` Slot for rendering cluster markers

Exposed

Exposed	Type
`supercluster`	`Supercluster`
`markers`	`Array<PointFeature<any>>`
`clusters`	`Array<ClusterFeature<any>>`

Context

The component provides a context that can be injected in child components

Context	Type
`supercluster`	`Ref<Supercluster \| undefined>` The Supercluster instance
`markers`	`Ref<Array<PointFeature<any>>>` The markers array
`clusters`	`Ref<Array<ClusterFeature<any>>>` The clusters array

CustomSupercluster.vue

<script setup lang="ts">
const { supercluster, markers, clusters } = injectMapboxSuperclusterContext();
</script>

<template>
  <div>{{ supercluster }}</div>
  <div>{{ markers }}</div>
  <div>{{ clusters }}</div>
</template>