Drawing heat maps

You can add a "heatmap" to an existing GPS Visualizer Leaflet map with the help of the Leaflet.heat plugin, which is included in GPS Visualizer's Leaflet functions. This plugin takes a JavaScript array of coordinates and renders them on a map as color-coded blobs.

To integrate a heatmap layer into a GPS Visualizer map, you just need to add some JavaScript code that tells GPS Visualizer the name of the .json file that contains the coordinates. If you want, you can also change the appearance using additional parameters.

Step 1: put your coordinates in simple JavaScript array format, and save them into a plain-text .json file.

The .json file should formatted as follows:

[ [lat,lon], [lat,lon], [lat,lon] ]

For example:

[[33.014641,-100.517616],[33.070862,-100.527443],[33.030361,-100.520638],[33.008827,-100.562805]]

Step 2: add a "heatmap_options" parameter to the gv_options array, with a "url" parameter inside of it.

The source of a GPS Visualizer Leaflet map contains a long list of gv_options parameters that control the appearance of the map. You need to add one more parameter: an array called gv_options.heatmap_options, with the name of the file that you created in Step 1 stored in a url field inside the array:

gv_options.heatmap_options = { 'url':"heatmap-coordinates.json" };

Step 3 (optional): add appearance parameters to the heatmap options array.

gv_options.heatmap_options can contain a number of parameters for altering the appearance of the heatmap: how big the "blobs" are, which colors to use, etc. See the Leaflet.heat documentation for explanations of each variable — and then play around with them to see what works best for you.

gv_options.heatmap_options = { 'url':"heatmap-coordinates.json" ,'minOpacity':0.6 // default 0.05 ,'maxZoom':21 // default is max zoom of map ,'max':1 // default 1 ,'radius':3.3 // default 25 ,'blur':2 // default 15 ,'gradient':{ 0.0:'purple', 0.5:'blue', 0.8:'lime', 0.9:'yellow', 0.98:'red' } };

And that's it! The presence of gv_options.heatmap_options tells GPS Visualizer's code to fetch the coordinates from your .json file and make them into a heatmap. You don't need to do any special coding.

Example

The map below shows the locations of 19,000 wind turbines in Texas. Plotting this many ordinary waypoint markers on an HTML map would cause most people's Web browsers to grind to a halt, but drawing a heatmap of that many points is no trouble at all. (Click here to open the map in a new window, and feel free to use it as a template for your own map.)

Multiple heatmaps

You may be wondering, can you add multiple heatmaps to a single Leaflet map? And if so, can they have different appearances? The answer to both is yes; you just need to make gv_options.heatmap_options into a list of arrays, like this:

gv_options.heatmap_options = [ { 'url':"file1.json" ,'id':"A" ,'gradient':{0.0:'purple',0.7:'blue',0.98:'cyan'} } ,{ 'url':"file2.json" ,'id':"B" ,'gradient':{0.0:'red',0.7:'red',0.9:'orange',0.98:'yellow'} } ];

Note that there is an additional parameter included here: id. If you include an id parameter, the heatmap layer will be stored in the variable gvg.heatmaps[id], in case you want to interact with it later. For example: gvg.heatmaps['A'].remove() to hide the layer — or gvg.heatmaps['A'].addTo(gmap) to put it back.

Return to the Tutorials index

Return to the main GPS Visualizer page