GPS Visualizer

Drawing heat maps

You can add a "heatmap" to a 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 need to add some JavaScript code that will import the coordinates from a .json file and send those to a heatmap-drawing function, and you need to tell GPS Visualizer to activate that code as it prepares your map.

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:


Step 2: add an "onload_function" parameter to the gv_options array.

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:

gv_options.onload_function = 'Get_Heatmap_Coordinates()';

This says, "when the map has finished loading all of its data and is ready to be viewed, run the function called Get_Heatmap_Coordinates."

Step 3: add a "Get_Heatmap_Coordinates" function.

Near the bottom of the map file, below the GV_Map() command but before the final closing </script> tag, add a function that will import the coordinates from the .json file that you created:

async function Get_Heatmap_Coordinates() {
   const data_url = "heatmap-coordinates.json";
   const request = new Request(data_url);
   const response = await fetch(request);
   const data = await response.json();

Step 4: add a "Draw_Heatmap" function.

Below the Get_Heatmap_Coordinates function that you just added, add a Draw_Heatmap function:

function Draw_Heatmap(hm_data) {
   var hm_options = {
      'minOpacity':0.6 // default 0.05
      ,'maxZoom':21 // default is max zoom of map
      ,'max':1 // default 1
      ,'radius':3 // default 25
      ,'blur':2 // default 15
      ,'gradient':{ 0.0:'purple', 0.5:'blue', 0.8:'lime', 0.9:'yellow', 0.98:'red' }
   var heatmap = L.heatLayer(hm_data,hm_options).addTo(gmap);

The hm_options array contains 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.


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

Return to the Tutorials index

Return to the main GPS Visualizer page