Recipe
Geographic Heatmap
Render dense location data as a smooth thermal overlay on any map surface.
Canvas layerKernel densityColor rampWebGL fallback
Step 1
Project lat/lng pairs onto a 2D canvas grid using Mercator scaling. Bin each point into a discrete cell.
Step 2
Convolve the binned grid with a Gaussian kernel. Radius controls the spread; intensity drives opacity.
Step 3
Map density values through a multi-stop gradient: cool violet for sparse, hot pink for dense clusters.
Step 4
Composite the heatmap canvas over your base map with “multiply” blend mode for a seamless thermal look.
Performance notes
- Use an offscreen canvas for kernel convolution to avoid layout thrash.
- Downsample input points beyond 50k — bin at 2× the display resolution.
- Debounce pan/zoom recalculations with requestAnimationFrame throttling.
← Back to docsMeridian recipe · v1.0