❤
npm
Sign UpSign In

ymaps-polygonmap

1.1.0 • Public • Published

Yandex Maps API Polygonmap Module

Yandex.Maps API module for data visualization.

Polygonmap is a graphical representation of some spatial data, where depending on the number of entered points polygons are painted in different colors. Polygonmap class allows to construct and display such representations over geographical maps.

Loading

  1. Put module source code (polygonmap.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/polygonmap.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/polygonmap.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 ymaps-polygonmap
    require('ymaps-polygonmap');
     
    // Or with babel
    import 'ymaps-polygonmap';

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

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

Polygonmap

Polygonmap module.

Requires: module:option.Manager, module:ObjectManager

Polygonmap ⏏

Kind: Exported class

new Polygonmap([data], [options])

Param Type Default Description
[data] Object Polygons and points.
data.polygons Object GeoJSON FeatureCollections.
data.points Object GeoJSON FeatureCollections.
[options] Object Options for customization.
[options.mapper] function defaultMapper Function of iterative transformation of features.
[options.fillBy] string "points" Calculate the color by points
[options.fillByWeightProp] string "weight" Prop name in data object, for weight value. If fillBy is "weight".
[options.fillByWeightType] string "middle" Type of calculate color by weight. Can be middle
[options.colorRanges] number | array 4 Count of ranges or array of custom ranges.
[options.colorScheme] string | array "['#e66a54', '#ce4356', '#ab2960', '#571756']" Preset for colorize or array of custom colors.
[options.fillOpacity] number 0.8 Opacity of polygon.
[options.fillColorEmptyPolygon] string "#f4f6f8" Color of polygon where points count equal 0.
[options.strokeColor] string "#fff" Color of polygon stroke.
[options.strokeWidth] number 1 Width of polygon stroke.
[options.showLegend] boolean true Flag to show color legend.
[options.legendTemplate] function colorLegend.defaultTemplate Receives object {color: value} returns html legend template.
[options.legendPosition] object top: 10, right: 10 Position of legend, you can only change the top or bottom and right or left.
[options.filter] function Function for custom filter polygons with points.
[options.filterEmptyPolygons] boolean false Flag for show polygon with count of points equal 0.
[options.onMouseEnter] function defaultOnMouseEnter Handler for mouseEnter event.
[options.onMouseLeave] function defaultOnMouseLeave Handler for mouseLeave event.
[options.onClick] function defaultOnClick Handler for click event.
[options.balloonContent] function defaultBalloonContent Function for render content of baloon. Recieves object with properties of polygon.
[options.fillColorHover] string Color of polygon on polygon hover.
[options.fillOpacityHover] number 0.9 Number of opacity on polygon hover.
[options.strokeColorHover] string Color of polygon stroke on polygon hover.
[options.strokeWidthHover] number 2 Number of stroke width on polygon hover.
[options.fillColorActive] string Color of polygon on polygon active.
[options.fillOpacityActive] number 0.9 Number of opacity on polygon active.
[options.strokeColorActive] string Color of polygon stroke on polygon active.
[options.strokeWidthActive] number 2 Number of stroke width on polygon active.
[options.interactivity] boolean true Flag for enable interactivity.

polygonmap.getData() ⇒ Object

Get the data, polygons and points.

Kind: instance method of Polygonmap
Returns: Object - Polygons and points.
Access: public

polygonmap.setData(data) ⇒ Polygonmap

Set the data, polygons and points.

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

Param Type Description
data Object Polygons and points.
data.polygons Object GeoJSON FeatureCollections.
data.points Object GeoJSON FeatureCollections.

polygonmap.getMap() ⇒ Map

Get the Map instance.

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

polygonmap.setMap(map) ⇒ Polygonmap

Set Map instance to render Polygonmap object.

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

Param Type Description
map Map Map instance.

polygonmap.destroy()

Destructs Polygonmap instance.

Kind: instance method of Polygonmap
Access: public

Examples

Displaying polygonmap over geographical map

ymaps.modules.require(['Polygonmap'], function (Polygonmap) {
    const dataPolygons = {
            type: 'FeatureCollection',
            features: [{
                id: 'id3',
                type: 'Feature',
                geometry: {
                    type: 'Polygon',
                    coordinates: [
                        [37.782051, -122.445068]
                        [37.782051, -122.445568]
                        [37.782951, -122.445068]
                        [37.782951, -122.445568]
                    ]
                }
            }]
        };
    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 data = {polygons: dataPolygons, points: dataPoints};
    const polygonmap = new Polygonmap(data);
 
    polygonmap.setMap(myMap);
});

Updating polygonmap data

ymaps.modules.require(['Polygonmap'], function (Polygonmap) {
    const data = {polygons: dataPolygons, points: dataPoints};
    const polygonmap = new Polygonmap(data);
 
    polygonmap.setMap(myMap);
 
    const newData = {polygons: newDataPolygons, points: newDataPoints};
 
    polygonmap.setData(newData);
});

Changing polygonmap representation options

ymaps.modules.require(['Polygonmap'], function (Polygonmap) {
    const data = {polygons: dataPolygons, points: dataPoints};
    const polygonmap = new Polygonmap(data);
 
    polygonmap.options.set('mapper', (feature) => {
        const {pointsCount, pointsCountMaximum} = feature.properties;
        const k = pointsCount / pointsCountMaximum;
 
        feature.options = {fillColor: `rgba(0, 0, 0, ${k})`};
 
        return feature;
    });
    polygonmap.setMap(myMap);
});

Demo

Readme

Keywords

Package Sidebar

Install

npm i ymaps-polygonmap

Repository

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

Homepage

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

Weekly Downloads

2

Version

1.1.0

License

MIT

Unpacked Size

79.6 kB

Total Files

30

Last publish

Collaborators

  • ruslankhh
  • shackijj
  • ruslanxdev
Try on RunKit
Report malware