Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ymaps-polygonmap
Advanced tools
Readme
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.
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 module.
Requires: module:option.Manager
, module:ObjectManager
Object
Polygonmap
Map
Polygonmap
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. |
Object
Get the data, polygons and points.
Kind: instance method of Polygonmap
Returns: Object
- Polygons and points.
Access: public
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. |
Map
Get the Map instance.
Kind: instance method of Polygonmap
Returns: Map
- Reference to Map instance.
Access: public
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. |
Destructs Polygonmap instance.
Kind: instance method of Polygonmap
Access: public
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);
});
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);
});
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);
});
FAQs
Yandex.Maps API module for data visualization.
The npm package ymaps-polygonmap receives a total of 7 weekly downloads. As such, ymaps-polygonmap popularity was classified as not popular.
We found that ymaps-polygonmap demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.