ymaps-gridmap v1.0.0
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
Put module source code (gridmap.min.js) on your CDN.
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.gitrequire('ymaps-gridmap'); // Or with babel import 'ymaps-gridmap';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
- Gridmap ⏏
- new Gridmap([data], [options])
- instance
- .setMap(map) ⇒ Polygonmap
- .getMap() ⇒ Map
- inner
- ~GridBounds : Object
- ~GridOptions : Object
- ~HexagonGripParams : Object
- ~SquareGripParams : Object
- Gridmap ⏏
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" | "square". |
| 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);
});