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