Skip to content

Latest commit

 

History

History
194 lines (159 loc) · 8.99 KB

README.md

File metadata and controls

194 lines (159 loc) · 8.99 KB
Raw

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

  1. 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>

  2. 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:Map
Map 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