Book Image

Leaflet.js Essentials

By : Paul Crickard III, Paul Crickard
Book Image

Leaflet.js Essentials

By: Paul Crickard III, Paul Crickard

Overview of this book

Table of Contents (13 chapters)
Leaflet.js Essentials
About the Author
About the Reviewers

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:

  1. First, include a reference to Leaflet.heat.js:

    <script src="Leaflet-heat.js"></script>
  2. 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 ="map",{doubleClickZoom:false}).setView([35.10418, -106.62987], 10);
  3. Create...