Heatmaps

Heatmaps visualize density data using color gradients to show concentrations of data points, making patterns and hotspots immediately visible. This example shows earthquake data transitioning from heatmap to individual circles at higher zoom levels.

The heatmap functionality is included in the base map component:

npx shadcn@latest add https://terrae.vercel.app/maps/map.json

Create a heatmap by adding a layer with type: "heatmap" and configuring the paint properties to control colors, intensity, and radius.

• heatmap-weight - Measure of how much an individual point contributes to the heatmap. Higher values create stronger hotspots.
• heatmap-intensity - Overall intensity multiplier. Can be zoom-dependent to make heatmap more visible at different scales.
• heatmap-color - Color gradient from low to high density. Uses interpolation between density values.
• heatmap-radius - Radius of influence for each point in pixels. Larger radius creates smoother, more general patterns.
• heatmap-opacity - Overall layer opacity. Can transition from heatmap to individual points at high zoom.

The heatmap color gradient is defined using interpolation expressions. Colors transition based on heatmap-density values from 0 to 1:

"heatmap-color": [
  "interpolate",
  ["linear"],
  ["heatmap-density"],
  0, "rgba(33,102,172,0)",      // Transparent at 0 density
  0.2, "rgb(103,169,207)",       // Light blue
  0.4, "rgb(209,229,240)",       // Lighter blue
  0.6, "rgb(253,219,199)",       // Light orange
  0.8, "rgb(239,138,98)",        // Orange
  1, "rgb(178,24,43)"            // Red at max density
]

• Use heatmaps for large datasets where individual points would create clutter
• Adjust heatmap-intensity based on zoom level to maintain visibility
• Transition to circle/symbol layers at high zoom for detail
• Choose color gradients that are colorblind-friendly and intuitive
• Consider using sequential or diverging color schemes for density data
• Set appropriate maxzoom to prevent heatmap from showing at street level

• Population density visualization
• Crime or incident hotspot analysis
• Customer location clustering
• Disease outbreak tracking
• Traffic accident concentration
• Weather data (temperature, precipitation)
• Sales territory analysis