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

Creating heatmaps with heatmap.js


Creating a heatmap that uses intensity can be accomplished in Leaflet using heatmap.js. You can get heatmap.js at http://www.patrick-wied.at/static/heatmapjs/index.html. This includes the plugins for leaflet.js and other mapping packages. The process to create the heatmap is similar to the previous example. The following steps will walk you through creating a heatmap:

  1. Using LeafletEssentials.html, add a reference to heatmap.js and heatmap-Leaflet with either a URL to a remote copy or the path to your local copy, as shown in the following code:

    <script type="text/javascript" src="http://www.patrick-wied.at/static/heatmapjs/src/heatmap.js"></script>
    <script type="text/javascript" src="http://www.patrick-wied.at/static/heatmapjs/src/heatmap-Leaflet"></script>
  2. Add a JavaScript object with the max value of the intensity and an array of data:

    Var myData={max: 46,
    data: [{lat: 33.5363, lon:-117.044, value: 1},{lat: 33.5608, lon:-117.24, value...