Leaflet.js Heatmap — Density Visualization Layer

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about Leaflet.js Heatmap. We cover key concepts, practical examples, and best practices to help you master this topic.

Leaflet.js heatmap layers visualize point density using color gradients, turning thousands of data points into an intuitive intensity heatmap overlay.

What You'll Learn

By the end of this guide, you will install leaflet.heat, configure heatmap radius and blur, set custom gradient colors, adjust intensity per point, and animate heatmap over time.

Basic Heatmap

// npm install leaflet.heat
var heat = L.heatLayer([
    [40.7128, -74.0060, 0.8],
    [40.7580, -73.9855, 0.5],
    [40.7484, -73.9856, 0.3]
], {
    radius: 25,
    blur: 15,
    maxZoom: 17,
    max: 1.0
}).addTo(map);

Custom Gradient

L.heatLayer(data, {
    gradient: {
        0.0: '#2a9d8f',
        0.4: '#4ecdc4',
        0.6: '#ff6b35',
        0.8: '#e74c3c',
        1.0: '#9b2226'
    },
    radius: 30
}).addTo(map);

Dynamic Data

var heat = L.heatLayer([], {
    radius: 20,
    blur: 10
}).addTo(map);

function addPoint(lat, lng, intensity) {
    heat.addLatLng([lat, lng, intensity]);
}

// Simulate real-time data
setInterval(function() {
    addPoint(
        40 + Math.random() * 5,
        -100 + Math.random() * 10,
        Math.random()
    );
}, 500);

Common Mistakes

1. Not Setting max

The max option normalizes intensity values. Without it, the highest value becomes 1.0, making comparisons across views inconsistent.

2. Too Large Radius

Radius over 50px blurs details and makes the heatmap look like a solid blob. Start at 20-30px.

3. Forgetting Intensity Values

If lat/lng arrays omit the third intensity value, all points have equal weight, losing the density distinction.

4. Performance With Many Points

10,000+ points with radius 30 can be slow. Reduce radius or use a pre-calculated raster overlay.

5. No Base Map Context

Heatmap without base map context is meaningless. Always add a tile layer underneath.

Practice Questions

Q1: What library provides heatmap support? A: leaflet.heat.

Q2: How does the gradient option work? A: It maps intensity values (0.0 to 1.0) to CSS color strings.

Q3: What does the radius option control? A: The influence radius of each point in pixels. Larger radius creates smoother gradients.

Q4: How do you update heatmap data? A: Call heat.setLatLngs(newData) to replace all data, or addLatLng to append.

Q5: How do you remove the heatmap? A: Call map.removeLayer(heat).

Challenge: Build a heatmap of taxi pickup locations in New York City. Add a time slider that filters data by hour of the day and animates the heatmap.

FAQ

Does leaflet.heat support Canvas?

Yes. leaflet.heat renders on canvas for better performance with large datasets.

Can I combine heatmap with clustering?

Yes. Use clustering for low-zoom and heatmap for high-zoom, toggling based on zoom level.

How do I export a heatmap as an image?

Use leaflet-image or html2canvas to capture the map container.

Is leaflet.heat maintained?

The original plugin is unmaintained. Community forks exist. Consider using the Leaflet.heat fork.

Can I use weighted heatmap?

Yes. The intensity value [lat, lng, weight] acts as the weight for each point.

Try It Yourself

Build a heatmap with random point data.

<!DOCTYPE html>
<html>
<head>
    <title>Heatmap Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.heat@0.2/dist/leaflet-heat.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Heatmap Layer</h2>
<div id="map" style="height:400px;border-radius:8px;"></div>
<button onclick="addRandomPoint()">Add Random Point</button>
<script>
var map = L.map('map').setView([40.7128, -74.0060], 12);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OSM'
}).addTo(map);

var points = [];
for (var i = 0; i < 200; i++) {
    points.push([
        40.7 + Math.random() * 0.2,
        -74.02 + Math.random() * 0.2,
        Math.random() * 0.8 + 0.2
    ]);
}

var heat = L.heatLayer(points, {
    radius: 30,
    blur: 20,
    maxZoom: 17,
    max: 1.0,
    gradient: {
        0.2: '#2a9d8f',
        0.4: '#4ecdc4',
        0.6: '#f7dc6f',
        0.8: '#ff6b35',
        1.0: '#e74c3c'
    }
}).addTo(map);

function addRandomPoint() {
    heat.addLatLng([
        40.7 + Math.random() * 0.2,
        -74.02 + Math.random() * 0.2,
        Math.random() * 0.8 + 0.2
    ]);
}
</script>
</body>
</html>

What's Next

Calculate routes and directions.

Routing — Routing with Leaflet Routing Machine. Controls Custom — Custom controls.

← Previous Leaflet.js Marker Clustering — Grouping Points at Scale Next → Leaflet.js Routing — Directions and Route Calculation

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Leafletjs