Skip to main content

Heat Map Overlay

Overlaying Heat Maps on map​

Heatmap Properties​

Required Parameters

  • Map
  • data This could be be the array of lat lng.

Optional Parameters

  • opacity: Set the opacity of the heatmap overlays.
    {
        opacity: 0.8
    }
  • radius: Set the radius of the heatmap overlays.
    {
        radius: 50
    }
  • maxIntensity: Set the intensity of the heatmap overlays.
    {
        maxIntensity: 50
    }
  • fitbounds: Fit map to layer. By default the value is false
    {
        fitbounds: true
    }
  • fitboundOptions: This shows the options aailable on the fitBound property.
    {
        fitboundOptions: {padding: 120,duration:1000}
    }
  • gradient: The color gradient of the heatmap, specified as an array of CSS color strings. All CSS3 colors are supported except for extended named colors.
    {
        gradient: [ 'rgba(0, 255, 255, 0)', 'rgba(0, 255, 255, 1)', 'rgba(0, 191, 255, 1)', 'rgba(0, 127, 255, 1)', 'rgba(0, 63, 255, 1)', 'rgba(0, 0, 255, 1)', 'rgba(0, 0, 223, 1)', 'rgba(0, 0, 191, 1)', 'rgba(0, 0, 159, 1)', 'rgba(0, 0, 127, 1)', 'rgba(63, 0, 91, 1)', 'rgba(127, 0, 63, 1)', 'rgba(191, 0, 31, 1)', 'brown' ]               
    }

HeatmapLayer Method​

Mappls.HeatmapLayer()

    var pts=[{lat: 28.774, lng: 80.190}, {lat: 28.466, lng: 76.118},{lat: 27.321, lng: 77.757}, {lat: 27.774, lng: 80.190}];
    var gradient = ['rgba(0, 255, 255, 0)', 'rgba(0, 255, 255, 1)', 'rgba(0, 191, 255, 1)', 'rgba(0, 127, 255, 1)', 'rgba(0, 63, 255, 1)', 'rgba(0, 0, 255, 1)', 'rgba(0, 0, 223, 1)', 'rgba(0, 0, 191, 1)', 'rgba(0, 0, 159, 1)', 'rgba(0, 0, 127, 1)', 'rgba(63, 0, 91, 1)', 'rgba(127, 0, 63, 1)', 'rgba(191, 0, 31, 1)', 'brown' ]; 
    heat_map=new mappls.HeatmapLayer({
        map:map_object,
        data:pts,
        opacity:1,
        radius:10,
        maxIntensity:10,
        fitbounds:true, // or false
        gradient1:gradient
    });

Remove HeatMap​

    Mappls.remove({map:map,layer:HeatmapLayer});