mapsapi-freet
v0.0.1
Published
Heatmap module for API Yandex.Maps
Downloads
78
Readme
Yandex Maps API Heatmap Module
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.
Loading
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(); });
Heatmap constructor
| Parameter | Default value | Decription |
|---------|-----------------------|----------|
| data | - | Type: Object.Points described using of following formats:Number[][] - coordinates array;IGeoObject - object implementing IGeoObject interface;IGeoObject[] - array of objects implementing IGeoObject interface;ICollection - collection of objects implementing IGeoObject interface;ICollection[] - array of collection of objects implementing IGeoObject interface;GeoQueryResult - result of geoQuery execution;Any - JSON representation of data according to GeoQueryResult input data format. |
| 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. |
Properties
| Name| Type| Description|
|----|-----|----------|
| options | option.Manager | Heatmap instance options manager. |
Methods
| 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. |
getData
Returns:
reference to data provided to constructor or setData method.
setData
Sets points. If Heatmap instance is already rendered, it will be re-rendered.
Returns:
Self-reference.
Parameters:
| Parameter | Default value | Description |
|---------|-----------------------|----------|
| data | - | Type: Object.Points descibed using one of following formats:Number[][] - coordinates array;IGeoObject - object implementing IGeoObject interface;IGeoObject[] - array of objects implementing IGeoObject interface;ICollection - collection of objects imlementing IGeoObject interface;ICollection[] - array of collection of objects implementing IGeoObject interface;GeoQueryResult - result of geoQuery execution;Any - JSON representation of data according to GeoQueryResult input data format. |
getMap
Returns:
reference to Map object.
setMap
Sets Map instance to render Heatmap object over it.
Returns:
self-reference.
Parameters:
| Parameter | Default value | Description |
|----------|-----------------------|----------|
| map | - | Type:MapMap instance to render Heatmap object over it. |
destroy
Destroys Heatmap instance
Examples
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); });