MapboxClusterMarker

A component for rendering cluster markers on a Mapbox map with expandable functionality.

Added since: v0.1.0

Last changed: 3 months ago

Overview

MapboxClusterMarker is a component that renders a marker representing a cluster of points on a Mapbox map. It provides functionality to expand clusters when clicked, revealing the individual points within the cluster.

Key features:

Renders cluster markers with point count
Expandable clusters on click
Customizable marker appearance
Context provider for cluster marker state

Usage

The component is typically used within a MapboxSupercluster component to render cluster markers.

MapComponent.vue

<template>
  <MapboxMap>
    <MapboxSupercluster :features="points">
      <template #cluster="{ id, feature }">
        <MapboxClusterMarker
          :id="id"
          :feature="feature"
          :options="{ anchor: 'center' }"
        >
          <span class="cluster-count">
            {{ feature.properties.point_count }}
          </span>
        </MapboxClusterMarker>
      </template>
    </MapboxSupercluster>
  </MapboxMap>
</template>

API Reference

Props

Prop	Default	Type
`id`*		`string` Unique identifier for the cluster marker
`options`		`MarkerOptions` Mapbox marker options for customizing appearance
`feature`*		`Feature<Point, any>` GeoJSON feature representing the cluster
`easingOptions`		`EasingOptions` Options for controlling the animation when expanding clusters

Exposed

Exposed	Type
`expandCluster()`	`(options?: EasingOptions) => void` Expands the cluster to reveal individual points (also the default click event)

Context

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

export type MapboxClusterMarkerContext = {
  clusterMarker: Ref<Marker | null>;
};

export const [injectMapboxClusterMarkerContext, provideMapboxClusterMarkerContext]
  = createContext<MapboxClusterMarkerContext>("MapboxClusterMarker");

Example

<template>
  <MapboxMap>
    <MapboxSupercluster :features="points">
      <template #cluster="{ id, feature }">
        <MapboxClusterMarker
          :id="id"
          :feature="feature"
          :options="{
            anchor: 'center',
            color: '#ff0000'
          }"
          @click="handleClusterClick"
        >
          <div class="custom-cluster">
            <span class="count">{{ feature.properties.point_count }}</span>
            <span class="label">Points</span>
          </div>
        </MapboxClusterMarker>
      </template>
    </MapboxSupercluster>
  </MapboxMap>
</template>

<script setup lang="ts">
function handleClusterClick() {
  // Handle cluster click event
}
</script>

<style>
.custom-cluster {
  background: white;
  border-radius: 50%;
  padding: 8px;
  text-align: center;
}

.count {
  font-weight: bold;
  font-size: 16px;
}

.label {
  font-size: 12px;
  color: #666;
}
</style>