MapboxSupercluster

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

Added since: v0.1.0

Last changed: 3 months ago

Overview

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.

Usage

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.

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>

API Reference

Props

Prop	Default	Type
`features`		`Feature<Point, any>[]` Array of GeoJSON features to be clustered

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` The Supercluster instance
`markers`	`Feature<Point, any>[]` The markers array
`clusters`	`Feature<Point, any>[]` The clusters array

Context

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

export type MapboxSuperclusterContext = {
  supercluster: Ref<Supercluster | undefined>;
  markers: Ref<Array<Feature<Point, any>>>;
  clusters: Ref<Array<Feature<Point, any>>>;
};

export const [injectMapboxSuperclusterContext, provideMapboxSuperclusterContext]
  = createContext<MapboxSuperclusterContext>("MapboxSupercluster");

Example

<script setup lang="ts">
const points = ref([
  {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-74.5, 40]
    },
    properties: {
      OBJECTID: '1'
    }
  }
  // ... more points
]);
</script>

<template>
  <MapboxMap>
    <MapboxSupercluster :features="points">
      <template #marker="{ feature }">
        <MapboxMarker :feature="feature">
          <div class="custom-marker">
            {{ feature.properties.name }}
          </div>
        </MapboxMarker>
      </template>
      <template #cluster="{ feature }">
        <MapboxClusterMarker :feature="feature">
          <div class="cluster-count">
            {{ feature.properties.point_count }}
          </div>
        </MapboxClusterMarker>
      </template>
    </MapboxSupercluster>
  </MapboxMap>
</template>

<script setup lang="ts">
import { injectMapboxSuperclusterContext } from './MapboxSupercluster.vue';

const { clusters } = injectMapboxSuperclusterContext();
</script>