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

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...