Book Image

Leaflet.js Essentials

Book Image

Leaflet.js Essentials

Overview of this book

Table of Contents (13 chapters)
Leaflet.js Essentials
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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 your data with the same name, plus a number that increments the number based on the time period. The following code can be used for this purpose:

    var points1=[[35,-106],[35,-106]];
    var points2=[[35.10418, -106.62987],[32,-104]];
    var points4...