Ymaps-polygonmap NPM

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

Put module source code (polygonmap.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/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';

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
- Polygonmap ⏏
  - new Polygonmap([data], [options])
  - .getData() ⇒ Object
  - .setData(data) ⇒ Polygonmap
  - .getMap() ⇒ Map
  - .setMap(map) ⇒ Polygonmap
  - .destroy()

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	weight.
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	maximum
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

https://yandex-shri-fx-team.github.io/ymaps-polygonmap

yandex maps polygonmap

colormap robust-point-in-polygon

@everything-registry/sub-chunk-3207 ymaps-gridmap ymaps-regionmap

1.1.0

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago