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 = L.map("map",{doubleClickZoom:false}).setView([35.10418, -106.62987], 10);

3. Create...