Mapsapi-freet NPM

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

Demo

yandex maps heatmap

@everything-registry/sub-chunk-2130 @infinitebrahmanuniverse/nolb-maps @zalastax/nolb-maps

0.0.1

4 years ago