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); });