Heatmap is a graphical representation of some spatial data where density values are indicated with different colors.
Heatmap
class allows to construct and display such representations over geographical maps.
Load both Yandex Maps JS API 2.1 and module source code by adding following code into <head> section of your page
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<!-- Change my.cdn.tld to your CDN host name -->
<script src="https://yastatic.net/s3/mapsapi-jslibs/heatmap/0.0.1/heatmap.min.js" type="text/javascript"></script>
Get access to module functions by using ymaps.modules.require method
ymaps.modules.require(['Heatmap'], function (Heatmap) {
var heatmap = new Heatmap();
});
Parameter | Default value | Decription |
---|---|---|
data | - | Type: Object. Points described using of following formats:
|
options | - | Type: Object. Heatmap representation options. |
options.radius | 10 | Type: Number. Point radius of influence (px). |
options.dissipating | false | Type: Boolean.true - disperse points on higher zoom levels according to radius, false - don't disperse. |
options.opacity | 0.8 | Type: Number. Heatmap opacity (from 0 to 1). |
options.intensityOfMidpoint | 0.2 | Type: Number. Intensity of median point (from 0 to 1). |
options.gradient | { 0.1: 'rgba(128, 255, 0, 0.7)', 0.2: 'rgba(255, 255, 0, 0.8)', 0.7: 'rgba(234, 72, 58, 0.9)', 1.0: 'rgba(162, 36, 25, 1)' } |
Type: Object. JSON description of gradient. |
Name | Type | Description |
---|---|---|
options | option.Manager | Heatmap instance options manager. |
Name | Returns | Description |
---|---|---|
getData | Object | null | Returns reference to data provided to constructor or setData method. |
setData | Heatmap | Adds new points. If Heatmap instance is already rendered, it will be re-rendered. |
getMap | Map | null | Returns reference to Map object. |
setMap | Heatmap | Sets Map instance to render heatmap layer over it. |
destroy | - | Destroys Heatmap instance. |
reference to data provided to constructor or setData method.
Sets points. If Heatmap
instance is already rendered, it will be re-rendered.
Self-reference.
Parameter | Default value | Description |
---|---|---|
data | - | Type: Object. Points descibed using one of following formats:
|
reference to Map object.
Sets Map instance to render Heatmap
object over it.
self-reference.
Parameter | Default value | Description |
---|---|---|
map | - | Type:Map Map instance to render Heatmap object over it. |
Destroys Heatmap
instance
Displaying heatmap over geographical map:
ymaps.modules.require(['Heatmap'], function (Heatmap) {
var data = [[37.782551, -122.445368], [37.782745, -122.444586]],
heatmap = new Heatmap(data);
heatmap.setMap(myMap);
});
ymaps.modules.require(['Heatmap'], function (Heatmap) {
var data = {
type: 'FeatureCollection',
features: [{
id: 'id1',
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [37.782551, -122.445368]
}
}, {
id: 'id2',
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [37.782745, -122.444586]
}
}]
},
heatmap = new Heatmap(data);
heatmap.setMap(myMap);
});
Updating heatmap data:
ymaps.modules.require(['Heatmap'], function (Heatmap) {
var data = [[37.782551, -122.445368], [37.782745, -122.444586]],
heatmap = new Heatmap(data);
heatmap.setMap(myMap);
var newData = [[37.774546, -122.433523], [37.784546, -122.433523]];
heatmap.setData(newData);
});
Changing heatmap representation options.
ymaps.modules.require(['Heatmap'], function (Heatmap) {
var data = [[37.782551, -122.445368], [37.782745, -122.444586]],
heatmap = new Heatmap(data);
// Heatmap becomes opaque
heatmap.options.set('opacity', 1);
heatmap.setMap(myMap);
});
ymaps.modules.require(['Heatmap'], function (Heatmap) {
var data = [[37.782551, -122.445368], [37.782745, -122.444586]],
heatmap = new Heatmap(data);
// Changing gradient
heatmap.options.set('gradient', {
'0.1': 'lime',
'0.9': 'red'
});
heatmap.setMap(myMap);
});
Weighted points.
ymaps.modules.require(['Heatmap'], function (Heatmap) {
var data = {
type: 'FeatureCollection',
features: [{
id: 'id1',
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [37.782551, -122.445368]
},
properties: {
weight: 1
}
}, {
id: 'id2',
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [37.782745, -122.444586]
},
properties: {
weight: 10
}
}]
},
heatmap = new Heatmap(data);
heatmap.setMap(myMap);
});