# MapboxCluster

Display a cluster on the map with data coming from a GeoJSON source.

Table of contents

# Examples

# Basic usage





 


<mapbox-map
  style="height: 400px"
  access-token="..."
  map-style="mapbox://styles/mapbox/streets-v11">
  <mapbox-cluster data="/earthquakes.json" />
</mapbox-map>

# Open popup on feature click







 
 
 
 
 
 
 
 


 














 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 




<template>
  <mapbox-map
    :access-token="MAPBOX_API_KEY"
    map-style="mapbox://styles/mapbox/streets-v11"
    :center="mapCenter"
    :zoom="1">
    <mapbox-popup
      v-if="popup.isOpen"
      :key="popup.position.join('-')"
      :lng-lat="popup.position"
      anchor="bottom"
      @mb-close="() => popup.isOpen = false">
      <div>{{ popup.data }}</div>
    </mapbox-popup>
    <mapbox-cluster
      data="/earthquakes.json"
      @mb-feature-click="openPopup($event)" />
  </mapbox-map>
</template>

<script>
  export default {
    data: () => ({
      mapCenter: [ 0, 0 ],
      popup: {
        isOpen: false,
        position: [0,0],
        data: null,
      }
    }),
    methods: {
      async openPopup({ geometry, properties }) {
        await this.$nextTick();
        this.popup.position = [ ...geometry.coordinates ];
        this.popup.isOpen = true;
        /**
         * Mapbox GL convert's properties values to JSON, so we need to parse them
         * to retreive any complex data structure such as arrays and objects.
         */
        this.popup.data = Object.entries(properties).reduce((data, [ key, value ]) => {
          try {
            data[key] = JSON.parse(value);
            return data;
          } catch (err) {
            // Silence is golden.
          }
          data[key] = value;
          return data;
        }, {});
      },
    },
  };
</script>

WARNING

The :center prop of the MapboxMap component must be set via a data property (see mapCenter in the example above) instead of directly in the template, as it can create unexpected behaviours when clicking on a cluster feature.

# Custom marker for unclustured points








 



 
 
 
 

 




<template>
  <mapbox-map
    style="height: 400px"
    :access-token="MAPBOX_API_KEY"
    map-style="mapbox://styles/mapbox/streets-v11"
    :center="[0, 0]"
    :zoom="1">
    <mapbox-image id="cat" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png">
      <mapbox-cluster
        data="/earthquakes.json"
        unclustered-point-layer-type="symbol"
        :unclustered-point-layout="{
          'icon-image': 'cat',
          'icon-size': 0.1,
        }"
        :unclustered-point-paint="null" />
    </mapbox-image>
  </mapbox-map>
</template>

# Props

# data

  • Type [ String, Object ]
  • Required true

The source of the data for the clustered points, must be a String or an Object of GeoJSON format.

# clusterMaxZoom

  • Type Number
  • Default 14

The max zoom to cluster points on.

# clusterRadius

  • Type Number
  • Default 50

Radius of each cluster when clustering point

# clustersLayout

  • Type Object
  • Default {}

The layout configuration for the clusters circles layer.

# clustersPaint

  • Type Object
  • Default { 'circle-color': '#000', 'circle-radius': 40 }

The paint configuration for the clusters circles layer.

# clusterCountLayout

  • Type Object
  • Default { 'text-field': [ 'get', 'point_count_abbreviated' ] }

The layout configuration for the clusters count layer.

# clusterCountPaint

  • Type Object
  • Default { 'text-color': 'white' }

The paint configuration for the clusters count layer.

# unclusteredPointLayerType

  • Type String
  • Default 'circle'

The type of the unclustered points layer.

# unclusteredPointLayout

  • Type Object
  • Default {}

The layout configuration for the unclustered points layer.

# unclusteredPointPaint

  • Type Object
  • Default { 'circle-color': '#000', 'circle-radius': 4 }

The paint configuration for the unclustered points layer.

# Events

# mb-cluster-click

Emitted when the user clicks on a cluster.

Params

  • clusterId: the ID of the cluster being clicked
  • event: the Mapbox event object sent by the layer

# mb-feature-click

Emitted when the user clicks on a unclustered point (a feature).

Params

  • feature: the feature being clicked on
  • event: the Mapbox event object sent by the layer

# mb-feature-mouseenter

Emitted when the user's mouse enters an unclustered point.

Params

  • feature: the feature being clicked on
  • event: the Mapbox event object sent by the layer

# mb-feature-mouseleave

Emitted when the user's mouse leaves an unclustered point.

Params

  • event: the Mapbox event object sent by the layer