Creating an interactive heatmap

A heatmap is an alternative visualization to a point map. A point map often becomes cluttered with large markers that make it hard to find hotspots. In an intensity heatmap, a single point could be a hotspot. The color coding of values in a heatmap makes it easy to see patterns in the data. Heatmaps can also be used to visualize other spatial data, such as tracking where a mouse moves on a web page or where a person's eyes travel when reading something on the screen. In this example, you will learn how to create a heatmap that responds to user mouse clicks on the map:

First, include a reference to Leaflet.heat.js:
```
<script src="Leaflet-heat.js"></script>
```
Next, disable the doubleClickZoom option on the map. Since the user will be clicking on the map to make the heatmap, you need to do this so that when the user clicks too fast, which they will, the map does not zoom:
```
var map = L.map("map",{doubleClickZoom:false}).setView([35...
```

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Leaflet.js Essentials

By : Paul Crickard III

Leaflet.js Essentials

By: Paul Crickard III

Overview of this book

Creating an interactive heatmap

Leaflet.js Essentials

By : Paul Crickard III

Leaflet.js Essentials

By: Paul Crickard III

Overview of this book

Creating an interactive heatmap

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access