Leaflet.js Essentials

Animating a heatmap

So far, you have created a heatmap that showed you the current density of points and intensities, but what if you wanted to show a heatmap that changed over time? In this last example, you will learn how to create a heatmap animation.

An animated heatmap is not as complicated as it might sound. Animation is nothing more than adding and removing data from the map, and you have covered these skills earlier in the chapter. The trick to this example is in the organization of your data and taking advantage of timing events in JavaScript. The following steps will walk you through making an animated heatmap:

1. Reference the heatmap plugin:

   <script src="Leaflet-heat.js"></script>

2. Next, separate your data into an array per time period. Name ...