Skip to content

Create a heatmap layer

Visualize earthquake frequency by location using a heatmap layer.

---
title: Create a heatmap layer
description: Visualize earthquake frequency by location using a heatmap layer.
type: geojson
options:
  zoom: 2
  center: [ -120, 50 ]
style:
  extends: https://styles.trailsta.sh/maptiler-basic.json
  layers:
    - type: heatmap
      beforeLayerId: waterway
      maxzoom: 9
      # Increase the heatmap weight based on frequency and property magnitude
      heatmap-weight:
        - interpolate
        - [ linear ]
        - [ get, mag ]
        - 0
        - 0
        - 6
        - 1
      # Increase the heatmap color weight weight by zoom level
      # heatmap-intensity is a multiplier on top of heatmap-weight
      heatmap-intensity:
        - interpolate
        - [ linear ]
        - [ zoom ]
        - 0
        - 1
        - 9
        - 3
      # Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
      # Begin color ramp at 0-stop with a 0-transparency color
      # to create a blur-like effect.
      heatmap-color:
        - interpolate
        - [ linear ]
        - [ heatmap-density ]
        - 0
        - rgba(33,102,172,0)
        - 0.2
        - rgb(103,169,207)
        - 0.4
        - rgb(209,229,240)
        - 0.6
        - rgb(253,219,199)
        - 0.8
        - rgb(239,138,98)
        - 1
        - rgb(178,24,43)
      # Adjust the heatmap radius by zoom level
      heatmap-radius:
        - interpolate
        - [ linear ]
        - [ zoom ]
        - 0
        - 2
        - 9
        - 20
      # Transition from heatmap to circle layer by zoom level
      heatmap-opacity:
        - interpolate
        - [ linear ]
        - [ zoom ]
        - 7
        - 1
        - 9
        - 0
    - type: circle
      beforeLayerId: waterway
      minzoom: 7
      # Size circle radius by earthquake magnitude and zoom level
      circle-radius:
        - interpolate
        - [linear]
        - [zoom]
        - 7
        - [interpolate, [linear], [get, mag], 1, 1, 6, 4]
        - 16
        - [interpolate, [linear], [get, mag], 1, 5, 6, 50]
      # Color circle by earthquake magnitude
      circle-color:
        - interpolate
        - [linear]
        - [get, mag]
        - 1
        - rgba(33,102,172,0)
        - 2
        - rgb(103,169,207)
        - 3
        - rgb(209,229,240)
        - 4
        - rgb(253,219,199)
        - 5
        - rgb(239,138,98)
        - 6
        - rgb(178,24,43)
      circle-stroke-color: white
      circle-stroke-width: 1
      # Transition from heatmap to circle layer by zoom level
      circle-opacity:
        - interpolate
        - [linear]
        - [zoom]
        - 7
        - 0
        - 8
        - 1
---
https://maplibre.org/maplibre-gl-js/docs/assets/earthquakes.geojson


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