❤
npm
Sign UpSign In

ymaps-gridmap

1.0.0 • Public • Published

Yandex Maps API Gridmap Module

Yandex.Maps API module for data visualization.

Gridmap is a graphical representation of some spatial data, where depending on the number of entered points cell of grid (hexogon or square) are painted in different colors. Gridmap class allows to construct and display such representations over geographical maps.

Loading

  1. Put module source code (gridmap.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/gridmap.min.js" type="text/javascript"></script>

    If you use GeoJSON data:

    <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU&coordOrder=longlat" type="text/javascript"></script>
    <!-- Change my.cdn.tld to your CDN host name -->
    <script src="http://my.cdn.tld/gridmap.min.js" type="text/javascript"></script>

    If you use npm:

    <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
    npm i --save git+https://github.com/yandex-shri-fx-team/ymaps-gridmap.git
    require('ymaps-gridmap');
     
    // Or with babel
    import 'ymaps-gridmap';

  3. Get access to module functions by using ymaps.modules.require method:

    ymaps.modules.require(['Gridmap'], function (Gridmap) {
         var gridmap = new Gridmap();
    });

Gridmap

Gridmap module.

Requires: module:Polygonmap, module:util.bounds

Gridmap ⏏

Kind: Exported class

new Gridmap([data], [options])

Param Type Description
[data] Object Points, GeoJSON FeatureCollections.
data.polygons Object GeoJSON FeatureCollections.
data.points Object GeoJSON FeatureCollections.
[options] Object Options for customization. See more options in Polygonmap.
[options.zoom] number Zoom which will be used for the grid calculation.
[options.grid] GridOptions Options which will be used in a grid calculation.
[options.grid.type] GridOptions Type of grid. Can be "hexagon"
[options.grid.params] GridParamsOptions Options which will be used in a grid render
[options.grid.params.bigRadius] number Radius of hexagon.
[options.grid.params.sideLength] number Side length of square.
[options.grid.bouds] GridBoundsOptions Options of bound for render grid.
[options.grid.bouds] number Options of bound for render grid.
[options.grid.bouds.leftBottom] Array Coordinates of left bottom point of bound.
[options.grid.bouds.topRight] Array Coordinates of right top point of bound.

gridmap.setMap(map) ⇒ Polygonmap

Set Map instance to render Polygonmap object.

Kind: instance method of Gridmap
Returns: Polygonmap - Self-reference.
Access: public

Param Type Description
map Map Map instance.

gridmap.getMap() ⇒ Map

Get the Map instance.

Kind: instance method of Gridmap
Returns: Map - Reference to Map instance.
Access: public

Gridmap~GridBounds : Object

Kind: inner typedef of Gridmap
Properties

Name Type Description
leftBotom Array.<number> Geographical coordinate of the left bottom point.
rigthTop Array.<number> Geographical coordinate of the right top point.

Gridmap~GridOptions : Object

Kind: inner typedef of Gridmap
Properties

Name Type Description
type string Type of grid.
[bounds] GridBounds Bounds for grid.
params HexagonGripParams | SquareGripParams Params of grid.

Gridmap~HexagonGripParams : Object

Kind: inner typedef of Gridmap
Properties

Name Type Description
bigRadius number Length of the big radius of a hexagon in pixels.

Gridmap~SquareGripParams : Object

Kind: inner typedef of Gridmap
Properties

Name Type Description
sideLenght number Length of a side of square in pixels.

Examples

Displaying gridmap over geographical map

ymaps.modules.require(['Gridmap'], function (Gridmap) {
    const dataPoints = {
            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]
                }
            }]
        };
    const gridmap = new Gridmap(dataPoints);
 
    gridmap.setMap(myMap);
});

Demo

Readme

Keywords

Package Sidebar

Install

npm i ymaps-gridmap

Repository

github.com/yandex-shri-fx-team/ymaps-gridmap

Homepage

github.com/yandex-shri-fx-team/ymaps-gridmap#readme

Weekly Downloads

4

Version

1.0.0

License

MIT

Unpacked Size

31.2 kB

Total Files

17

Last publish

Collaborators

  • ruslankhh
  • shackijj
  • ruslanxdev
Try on RunKit
Report malware