Heatmap: Yandex.Maps API plugin for data visualization
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit 8494634 Jul 18, 2018

README.md

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. Put module source code (heatmap.min.js) on your CDN.

  2. 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="http://my.cdn.tld/Heatmap.min.js" type="text/javascript"></script>
  3. 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