Add Heat Map


Heat mapping, from a geographic perspective, is a method of showing the geographic clustering of a phenomenon. Sometimes also referred as hot spot mapping, heat maps show locations of higher densities of geographic entities (although hot spot analysis tends to be used to show statistically significant patterns: more about the difference between heat maps and hot spot maps). The ‘heat’ in the term refers to the concentration of the geographic entity within any given spot, not to be confused with heat mapping that refers to the mapping of actual temperatures on the earth’s surface. Heat mapping is a way of geographically visualizing locations so that patterns of higher than average occurrence of things likes crime activity, traffic accidents, or store locations can emerge.

SupeMap JavaScript APIs have provided a HeatMapLayer class for creating a heat map.

Step1 Initialize Base Map

To create a heat map, first you need to initialize the base map and verify the compatibility of the browser. In this sample, we use the World map as the base map.

var map, layer, heatMapLayer,
    url = "http://www.supermapol.com/iserver/services/vm3sbiax/rest/maps/World",
    value = "VZ88xbrMEMpGv4yiisTojgVq",
    name = "key";
SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(value, "key");

function init(){
    //Verify the compatibility of the browser
    if(!document.createElement('canvas').getContext) {
        alert(' Your browser doesn't support canvas, please upgrade');
        return;
    }
    //Initialize the base map and add basic controls
    map = new SuperMap.Map("map",{controls: [
        new SuperMap.Control.ScaleLine(),
        new SuperMap.Control.Zoom(),
        new SuperMap.Control.Navigation({
            dragPanOptions: {
                enableKinetic: true
            }
        })]
    });
    map.addControl(new SuperMap.Control.MousePosition());
……
}

Initialize base map and heat map layer:

    //Initialize base map
    layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, {transparent: true, cacheEnabled: true}, {maxResolution:"auto"});
    //Initialize heat map layer HeatMapLayer
    heatMapLayer = new SuperMap.Layer.HeatMapLayer(
            "heatMap",
            {
                "radius":45,
                "featureWeight":"value",
                "featureRadius":"geoRadius"
            }
    );
    layer.events.on({"layerInitialized": addLayer});

Step2 Create Heat Map

In this sample, we create a heat map using the radius "heatradius" and the heat points "heatPoints" that are generated randomly by the specified number of heat points "heatNums".

If you want to create a heat map using the fixed points, you can directly assign the coordinates of the points to the array "heatPoints".

//the heat points
function createHeatPoints(){
    clearHeatPoints();
    var heatPoints = [];
    var num = parseInt(document.getElementById('heatNums').value);
    var radius = parseInt(document.getElementById('heatradius').value);
    var unit = document.getElementById("radiusUnit").value,
            useGeoRadius = false;
    if("degree" == unit){
        useGeoRadius = true;
    }
    heatMapLayer.radius = radius;
    // Generate the heat points randomly by the specified number of heat points "heatNums".
    for(var i=0; i < num; i++){
        heatPoints[i] = new SuperMap.Feature.Vector(
                new SuperMap.Geometry.Point(
                        Math.random()*360 - 180,
                        Math.random()*180 - 90
                ),
                {
                    "value":Math.random()*9,
                    "geoRadius":useGeoRadius?radius:null
                }
        );
    }
    heatMapLayer.addFeatures(heatPoints);
}

Step3 Add the base map and heat map layers to the map

//Add the base map and heat map layers to the map, and set the map center and zoom levels
function addLayer() {
    map.addLayers([layer,heatMapLayer]);
    map.setCenter(new SuperMap.LonLat(0, 0), 0);
}

Step4 Delete a heat map

function clearHeatPoints(){
    heatMapLayer.removeAllFeatures();
}

Online Demo and Code Editing

You can access the online source code and visualize the demo. You can also edit the source code and change the demo.