Create and style clusters
Use MapLibre GL JS' built-in functions to visualize points as clusters.
---
title: Create and style clusters
description: Use MapLibre GL JS' built-in functions to visualize points as clusters.
options:
center: [-103.59179687498357, 40.66995747013945]
zoom: 3
style:
extends: https://styles.trailsta.sh/osm-liberty.json
sources:
# Add a new source from our GeoJSON data and
# set the 'cluster' option to true. GL-JS will
# add the point_count property to your source data.
earthquakes:
type: geojson
# Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
# from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
data: https://maplibre.org/maplibre-gl-js/docs/assets/earthquakes.geojson
cluster: true
clusterMaxZoom: 14 # Max zoom to cluster points on
clusterRadius: 50 # Radius of each cluster when clustering points (defaults to 50)
layers:
- type: circle
source: earthquakes
filter: [has, point_count]
# Use step expressions (https://maplibre.org/maplibre-style-spec/#expressions-step)
# with three steps to implement three types of circles:
# * Blue, 20px circles when point count is less than 100
# * Yellow, 30px circles when point count is between 100 and 750
# * Pink, 40px circles when point count is greater than or equal to 750
circle-color:
- step
- [get, point_count]
- '#51bbd6'
- 100
- '#f1f075'
- 750
- '#f28cb1'
circle-radius:
- step
- [get, point_count]
- 20
- 100
- 30
- 750
- 40
- type: symbol
source: earthquakes
filter: [has, point_count]
text-field: '{point_count_abbreviated}'
text-font: [DIN Offc Pro Medium, Arial Unicode MS Bold]
text-size: 12
- type: circle
source: earthquakes
filter: ['!', [has, point_count]]
circle-color: '#11b4da'
circle-radius: 4
circle-stroke-width: 1
circle-stroke-color: '#fff'
---