Skip to content

Latest commit

 

History

History
127 lines (83 loc) · 4.78 KB

heatMap.md

File metadata and controls

127 lines (83 loc) · 4.78 KB
Raw

< Back to Table of Contents

MapmyIndia Interactive Vector Maps JS SDK for Web !

For access, you can get your api key from Mappls Console

Heat Map Overlay

A heat map is a graphical representation of data where values are depicted as colors. Heat maps are often used to visualize the intensity or density of point data across a map. The color gradient on the map helps users quickly identify areas with higher or lower concentrations of the data. For a heat map, you typically use a color gradient from cool to warm color tones (e.g., blue to red) to represent low to high values.

Overlaying Heat Maps on map

Heat Map

Heatmap Properties

Required

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

Optional Properties

  • 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 bounds. By default the value is false
	{
		fitbounds: true
	}
  • fitboundOptions: This shows the options available 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});

For any queries and support, please contact:

Email us at [email protected]

Support Need support? contact us!





@ Copyright 2022 CE Info Systems Ltd. All Rights Reserved.