<MapboxClusterMarker>

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

Added since: v0.1.0

Last changed: 1 month ago

Usage

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.

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

Basic example

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>

Type Definition

type MapboxClusterMarkerProps
 = {
    /**
     * Unique identifier for the cluster marker
     */
    id
: string;
    /**
     * Mapbox cluster marker options
     * @see {@link mapboxgl.MarkerOptions|MarkerOptions}
     */
    options
?: MarkerOptions
;
    /**
     * GeoJSON feature containing cluster marker coordinates
     * @see {@link ClusterFeature|ClusterFeature}
     */
    feature
: ClusterFeature
<any>;
    /**
     * Easing options for the cluster marker
     *
     * _Composed type of {@link mapboxgl.CameraOptions|CameraOptions} and {@link mapboxgl.AnimationOptions|AnimationOptions}._
     * @see {@link mapboxgl.EasingOptions|EasingOptions}
     */
    easingOptions
?: EasingOptions
;
    /**
     * The element or component this component should render as.
     *
     * Will prioritize components over elements when the name for both is the same.
     * @defaultValue "button"
     * @see {@link AsTag|AsTag}
     * @see {@link Component|Component}
     * @example
     * ```vue
     * <template>
     *     <MapboxMarker as="span" />
     * </template>
     * ```
     */
    as
?: MapboxMarkerProps
["as"];
} & Pick
<MapboxMarkerProps
, "asChild">;

type MapboxClusterMarkerContext
 = {
    /**
     * The cluster Marker instance
     * @see {@link mapboxgl.Marker|Marker}
     * @see {@link https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker|Mapbox GL Docs - Marker}
     */
    clusterMarker
: Ref
<Marker
 | null | undefined>;
};

API Reference

Props

Prop	Default	Type
`id`*		`string` Unique identifier for the cluster marker
`options`	`{ anchor: 'top-left' }`	`MarkerOptions` Mapbox cluster marker options
`feature`*		`ClusterFeature<any>` GeoJSON feature containing cluster marker coordinates
`easingOptions`		`EasingOptions` Easing options for the cluster marker Composed type of `mapboxgl.CameraOptions` and `mapboxgl.AnimationOptions`.
`as`	`button`	`string` The element or component this component should render as Will prioritize components over elements when the name for both is the same.

Events

Event	Payload
`click`	`() => expandCluster()` Expanded the cluster to reveal individual points (also the default click event)

Slots

Slot	Payload
`default`	Content to render inside the cluster marker
`cluster-marker-count`	Content to render inside the cluster marker count

Attributes

Attribute	Value	Type
`data-type`	`mapbox-cluster-marker`	`string`

Exposed

Exposed	Type
`clusterMarker`	`Marker`
`clusterMarkerElement`	`ComponentPublicInstance` The cluster marker element instance
`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

Context	Type
`clusterMarker`	`Ref<Marker \| null>` The cluster marker instance

CustomClusterMarker.vue

<script setup lang="ts">
const { clusterMarker } = injectMapboxClusterMarkerContext();
</script>

<template>
  <div>{{ clusterMarker }}</div>
</template>