Back

Creating Heatmap

Note: This service requires your project to have an associated billing information.

In order to create an heatmap, call the CreateHeatmap method of the map object like this:

 map.CreateHeatmap(data, radius, gradient, show)

data Array
Required. An array of latLng literal objects. The data points to display to display as heatmap.
radius Number
Optional. The radius of influence for each data point, in pixels.
gradient Array
Optional. An array or color strings 'rgba(0-255, 0-255, 0-255, 0-1)'
show Boolean
Optional. Whether to show or hide the heatmap when created. Default is true.

This will return an heatmap object.

For a bigger list of data points to display, you can save your data into a database or in a json file for coding efficiency.

Creating heatmap

app.LoadPlugin("MapView");

function OnStart() {
    lay = app.CreateLayout("Linear", "VCenter, FillXY");
        
        var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck";
        
        map = app.CreateMapView(apiKey, 0.9, 0.5, 37.775, -122.434, 13);
        map.SetOnReady(MapOnReady);
        lay.AddChild(map);

    app.AddLayout(lay);
}
function MapOnReady() {
    map.AddListener('tilesloaded', 'PlotHeatMap');
    // Ensure that the map tiles are fully loaded
}
function PlotHeatMap() {
    var data = [
        {lat: 37.782551, lng: -122.445368},
        {lat: 37.782745, lng: -122.444586},
        {lat: 37.782842, lng: -122.443688},
        {lat: 37.782919, lng: -122.442815},
        {lat: 37.782992, lng: -122.442112},
        {lat: 37.783100, lng: -122.441461},
        {lat: 37.783206, lng: -122.440829},
        {lat: 37.783273, lng: -122.440324},
        {lat: 37.783316, lng: -122.440023},
        {lat: 37.783357, lng: -122.439794},
        {lat: 37.783371, lng: -122.439687},
        {lat: 37.783368, lng: -122.439666},
        {lat: 37.783383, lng: -122.439594},
        {lat: 37.783508, lng: -122.439525},
        {lat: 37.783842, lng: -122.439591},
        {lat: 37.784147, lng: -122.439668},
        {lat: 37.784206, lng: -122.439686},
        {lat: 37.784386, lng: -122.439790},
        {lat: 37.784701, lng: -122.439902},
        {lat: 37.784965, lng: -122.439938},
        {lat: 37.785010, lng: -122.439947},
        {lat: 37.785360, lng: -122.439952},
        {lat: 37.785715, lng: -122.440030},
        {lat: 37.786117, lng: -122.440119},
        {lat: 37.786564, lng: -122.440209},
        {lat: 37.786905, lng: -122.440270},
        {lat: 37.786956, lng: -122.440279},
        {lat: 37.800224, lng: -122.433520},
        {lat: 37.800155, lng: -122.434101},
        {lat: 37.800160, lng: -122.434430},
        {lat: 37.800378, lng: -122.434527},
        {lat: 37.800738, lng: -122.434598},
        {lat: 37.800938, lng: -122.434650},
        {lat: 37.801024, lng: -122.434889},
        {lat: 37.800955, lng: -122.435392},
        {lat: 37.800886, lng: -122.435959},
        {lat: 37.800811, lng: -122.436275},
        {lat: 37.800788, lng: -122.436299},
        {lat: 37.800719, lng: -122.436302},
        {lat: 37.800702, lng: -122.436298},
        {lat: 37.800661, lng: -122.436273},
        {lat: 37.800395, lng: -122.436172},
        {lat: 37.800228, lng: -122.436116},
        {lat: 37.800169, lng: -122.436130},
        {lat: 37.800066, lng: -122.436167},
        {lat: 37.784345, lng: -122.422922},
        {lat: 37.784389, lng: -122.422926},
        {lat: 37.784437, lng: -122.422924},
        {lat: 37.784746, lng: -122.422818},
        {lat: 37.785436, lng: -122.422959},
        {lat: 37.786120, lng: -122.423112},
        {lat: 37.786433, lng: -122.423029}
    ];
    
    heatmap = map.CreateHeatmap(data, 10, null, true);
}
Copy    Run   

Primary methods

 Show()
 Hide()
 Remove()

You can review for the definitions of the methods below at google map Infowindow class.

Setters

Below are the available setters for you to customize your infowindow the way you want.

 SetData(data)
 SetRadius(number)
 SetOpacity(opacity)
 SetGradient(gradient)

Setting radius

app.LoadPlugin("MapView");

function OnStart() {
    lay = app.CreateLayout("Linear", "VCenter, FillXY");
        
        var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck";
        
        map = app.CreateMapView(apiKey, 0.95, 0.65, 37.775, -122.434, 13);
        map.SetOnReady(MapOnReady);
        lay.AddChild(map);
        
        spin = app.CreateSpinner( "10,20,30", 0.4 );
        spin.SetOnChange( ChangeRadius );
        spin.SelectItem("10");
        lay.AddChild(spin);

    app.AddLayout(lay);
}
function MapOnReady() {
    var data = [
        {lat: 37.782551, lng: -122.445368},
        {lat: 37.782745, lng: -122.444586},
        {lat: 37.782842, lng: -122.443688},
        {lat: 37.782919, lng: -122.442815},
        {lat: 37.782992, lng: -122.442112},
        {lat: 37.783100, lng: -122.441461},
        {lat: 37.783206, lng: -122.440829},
        {lat: 37.783273, lng: -122.440324},
        {lat: 37.783316, lng: -122.440023},
        {lat: 37.783357, lng: -122.439794},
        {lat: 37.783371, lng: -122.439687},
        {lat: 37.783368, lng: -122.439666},
        {lat: 37.783383, lng: -122.439594},
        {lat: 37.783508, lng: -122.439525},
        {lat: 37.783842, lng: -122.439591},
        {lat: 37.784147, lng: -122.439668},
        {lat: 37.784206, lng: -122.439686},
        {lat: 37.784386, lng: -122.439790},
        {lat: 37.784701, lng: -122.439902},
        {lat: 37.784965, lng: -122.439938},
        {lat: 37.785010, lng: -122.439947},
        {lat: 37.785360, lng: -122.439952},
        {lat: 37.785715, lng: -122.440030},
        {lat: 37.786117, lng: -122.440119},
        {lat: 37.786564, lng: -122.440209},
        {lat: 37.786905, lng: -122.440270},
        {lat: 37.786956, lng: -122.440279},
        {lat: 37.800224, lng: -122.433520},
        {lat: 37.800155, lng: -122.434101},
        {lat: 37.800160, lng: -122.434430},
        {lat: 37.800378, lng: -122.434527},
        {lat: 37.800738, lng: -122.434598},
        {lat: 37.800938, lng: -122.434650},
        {lat: 37.801024, lng: -122.434889},
        {lat: 37.800955, lng: -122.435392},
        {lat: 37.800886, lng: -122.435959},
        {lat: 37.800811, lng: -122.436275},
        {lat: 37.800788, lng: -122.436299},
        {lat: 37.800719, lng: -122.436302},
        {lat: 37.800702, lng: -122.436298},
        {lat: 37.800661, lng: -122.436273},
        {lat: 37.800395, lng: -122.436172},
        {lat: 37.800228, lng: -122.436116},
        {lat: 37.800169, lng: -122.436130},
        {lat: 37.800066, lng: -122.436167},
        {lat: 37.784345, lng: -122.422922},
        {lat: 37.784389, lng: -122.422926},
        {lat: 37.784437, lng: -122.422924},
        {lat: 37.784746, lng: -122.422818},
        {lat: 37.785436, lng: -122.422959},
        {lat: 37.786120, lng: -122.423112},
        {lat: 37.786433, lng: -122.423029}
    ];
    
    heatmap = map.CreateHeatmap(data, 10, null, show);
}
function ChangeRadius(rad) {
    heatmap.SetRadius(parseInt(rad));
}
Copy    Run   

Getters

Below are the available getter of the heatmap object.
Note: All the getter functions are asynchronous. Therefore you are required to pass a callback function.

 GetData(callback)