Skip to content

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'
---


View Map on Overpass Ultra
Edit Query on Overpass Ultra
View MapLibre Example