Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@h21-map/yandex-drawing-manager

Package Overview
Dependencies
Maintainers
1
Versions
34
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@h21-map/yandex-drawing-manager - npm Package Compare versions

Comparing version 2.0.6 to 4.0.2

700

index.js

@@ -0,1 +1,418 @@

ymaps.modules.define('DrawingManager',
function (
provide
) {
let DRAWING_MODE_MARKER = "marker";
let DRAWING_MODE_CIRCLE = "circle";
var DrawingManager = function (map, opts) {
this.map = map;
this._opts = opts;
this._drawingType = opts.drawingMode || DRAWING_MODE_MARKER;
this._fitBounds = opts._fitBounds || true;
this.markerOptions = opts.markerOptions || {};
this.circleOptions = opts.circleOptions || {};
this._enableDraw = opts.enableDraw;
this.radius = opts.circleOptions.radius;
};
DrawingManager.prototype.setDrawingMode = function (drawingType) {
let me = this;
this._drawingType = drawingType;
switch (drawingType) {
case DRAWING_MODE_MARKER:
me._bindMarker();
break;
case DRAWING_MODE_CIRCLE:
me._bindCircle();
break;
}
};
DrawingManager.prototype.setPosition = function (latitude, longitude) {
let me = this;
me.position = null;
me.position = [latitude, longitude];
};
DrawingManager.prototype._setPosition = function (e) {
let me = this;
me.position = null;
me.position = e.get('coords');
};
DrawingManager.prototype.setEnableDraw = function (enabled) {
this._enableDraw = enabled;
};
DrawingManager.prototype.setDefaultCursor = function (cursor) { };
DrawingManager.prototype.setAreaFitBounds = function () { };
DrawingManager.prototype.setMarkerFitBounds = function () { };
DrawingManager.prototype.setCircleFitBounds = function () { };
DrawingManager.prototype._getInfo = function () { };
DrawingManager.prototype._vertexMarkerAddEventListener = function () { };
DrawingManager.prototype._bindMarker = function () {
let me = this;
if (me._centerMarker) {
me.map.geoObjects.removeAll();
me._centerMarker = null;
me.map.container.events.remove('click');
}
var createCenterMarker = (e) => {
if (me._centerMarker) {
me.map.geoObjects.removeAll();
me._centerMarker = null;
}
if (e) {
me._setPosition(e);
}
if (me.position) {
const geo = {
geometry: {
type: "Point",
coordinates: me.position
}
}
options = {
iconLayout: 'default#image',
iconImageSize: [24, 28],
iconImageOffset: [0, 0],
iconImageHref: me.markerOptions.iconUrl,
draggable: false,
}
me._centerMarker = new ymaps.GeoObject(geo, options);
me.map.geoObjects.add(me._centerMarker);
me.map.setCenter(me.position, 9, {
checkZoomRange: true
});
me.position = null;
me.map.events.fire('draw:marker_create', null);
}
}
if (!this._enableDraw) {
createCenterMarker();
me.map.container.events.remove('click');
}
this.map.container.events.add('click', (event) => {
event.stopImmediatePropagation();
if (this._enableDraw) {
createCenterMarker(event)
}
});
};
DrawingManager.prototype._bindCircle = function () {
let me = this;
if (me.circle) {
me.map.geoObjects.remove(me.circle);
me.map.geoObjects.remove(me._vertexMarker);
me.map.events.fire('draw:circle_remove', null);
}
if (me._centerMarker) {
const position = [me._centerMarker.geometry.getCoordinates(), me.radius];
const options = {
fillColor: me.circleOptions.fillColor,
fillOpacity: me.circleOptions.fillOpacity,
strokeColor: me.circleOptions.strokeColor,
strokeOpacity: me.circleOptions.strokeOpacity,
strokeWidth: me.circleOptions.strokeWeight,
}
this.circle = new ymaps.Circle(position, {}, options);
me.map.geoObjects.add(this.circle);
me.map.events.fire('draw:circle_create', me._getInfo());
me.map.setBounds(this.circle.geometry.getBounds());
me._centerMarker.options.set({
draggable: true,
});
me._centerMarker.options.set({
cursor: 'move',
});
me._centerMarker.options.set({
zIndex: 9999,
});
me._centerMarkerAddEventListener();
me._createVertexMarker();
}
};
DrawingManager.prototype._centerMarkerAddEventListener = function () {
let me = this;
me._centerMarker.events.add('drag', function (event) {
var coords = event.get('target').geometry.getCoordinates();
me.circle.geometry.setCoordinates(coords);
let to = me.destination(coords, 90, me.radius);
if (me._vertexMarker) {
me._vertexMarker.geometry.setCoordinates(to);
};
me.map.events.fire('draw:circle_centre_change', me._getInfo());
})
me._centerMarker.events.add('dragend', () => {
me.map.events.fire('draw:circle_center_complete', me._getInfo());
});
me._centerMarker.events.add('mouseover', () => {
me.map.events.fire('draw:marker_mouseover', me._getInfo());
});
me._centerMarker.events.add('mouseout', () => {
me.map.events.fire('draw:marker_mouseout', me._getInfo());
});
me._centerMarker.events.add('click', () => {
me.map.events.fire('draw:marker_click', me._getInfo());
})
};
DrawingManager.prototype._createVertexMarker = function () {
let me = this;
me.to = null;
me.to = me.destination(me._centerMarker.geometry.getCoordinates(), 90, me.radius);
const g = {
geometry: {
type: "Point",
coordinates: me.to
}
}
const svg = [
'<?xml version="1.0"?>',
'<svg width="15px" height="15px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">',
'<circle stroke="#003dd9" fill="white" stroke-width="10" cx="50" cy="50" r="35"/>',
'</svg>'
].join('\n');
const opt = {
iconLayout: 'default#imageWithContent',
iconImageSize: [24, 28],
iconImageOffset: [-9, -5],
iconImageHref: '',
draggable: true,
iconContentLayout: ymaps.templateLayoutFactory.createClass(svg),
}
me._vertexMarker = new ymaps.GeoObject(g, opt);
me.map.geoObjects.add(me._vertexMarker);
me._vertexMarker.options.set({
cursor: 'col-resize',
});
me._vertexMarkerAddEventListener();
};
DrawingManager.prototype._vertexMarkerAddEventListener = function () {
let me = this;
me._vertexMarker.events.add('drag', (event) => {
var coords = event.get('target').geometry.getCoordinates();
let distance = me.getDistanceTo(me._centerMarker.geometry.getCoordinates(), coords);
me.radius = distance;
if (me.circle) {
me.circle.geometry.setRadius(distance);
}
let pixel = {
clientX: event.get('domEvent').get('clientX'),
clientY: event.get('domEvent').get('clientY'),
}
let ev = {
pixel,
radius: me.circle.geometry.getRadius(),
}
me.map.events.fire('draw:circle_radius_change', ev);
});
me._vertexMarker.events.add('dragend', () => {
me.map.events.fire('draw:circle_radius_complete', me._getInfo());
})
};
DrawingManager.prototype._getInfo = function () {
let me = this;
let position = {
latitude: me._centerMarker.geometry.getCoordinates()[0],
longitude: me._centerMarker.geometry.getCoordinates()[1]
}
let info = {
radius: me.circle.geometry.getRadius(),
position
};
return info;
}
DrawingManager.prototype.destination = function (latlng, heading, distance) {
heading = (heading + 360) % 360;
var rad = Math.PI / 180,
radInv = 180 / Math.PI,
R = 6378137,
lon1 = latlng[1] * rad,
lat1 = latlng[0] * rad,
rheading = heading * rad,
sinLat1 = Math.sin(lat1),
cosLat1 = Math.cos(lat1),
cosDistR = Math.cos(distance / R),
sinDistR = Math.sin(distance / R),
lat2 = Math.asin(sinLat1 * cosDistR + cosLat1 *
sinDistR * Math.cos(rheading)),
lon2 = lon1 + Math.atan2(Math.sin(rheading) * sinDistR *
cosLat1, cosDistR - sinLat1 * Math.sin(lat2));
lon2 = lon2 * radInv;
lon2 = lon2 > 180 ? lon2 - 360 : lon2 < -180 ? lon2 + 360 : lon2;
return [lat2 * radInv, lon2]
};
DrawingManager.prototype.degreeToRad = function (degree) {
return Math.PI * degree / 180;
};
DrawingManager.prototype._getRange = function (v, a, b) {
if (a != null) {
v = Math.max(v, a);
}
if (b != null) {
v = Math.min(v, b);
}
return v;
};
DrawingManager.prototype._getLoop = function (v, a, b) {
while (v > b) {
v -= b - a
}
while (v < a) {
v += b - a
}
return v;
};
DrawingManager.prototype.getDistanceTo = function (point1, point2) {
var me = this;
point1[1] = me._getLoop(point1[1], -180, 180);
point1[0] = me._getRange(point1[0], -74, 74);
point2[1] = me._getLoop(point2[1], -180, 180);
point2[0] = me._getRange(point2[0], -74, 74);
var x1, x2, y1, y2;
x1 = this.degreeToRad(point1[1]);
y1 = this.degreeToRad(point1[0]);
x2 = this.degreeToRad(point2[1]);
y2 = this.degreeToRad(point2[0]);
return 6370996.81 * Math.acos((Math.sin(y1) * Math.sin(y2) + Math.cos(y1) * Math.cos(y2) * Math.cos(x2 - x1)));
};
DrawingManager.prototype.setMap = function (map) {
};
DrawingManager.prototype.destroy = function () {
this._data = null;
this.setMap(null);
};
DrawingManager.prototype._refresh = function () {
if (this._layer) {
this._layer.update();
}
return this;
};
provide(DrawingManager);
});
function DrawingManager(map, opts) {

@@ -9,2 +426,6 @@

var DRAWING_MODE_MARKER = "marker",

@@ -24,2 +445,7 @@ DRAWING_MODE_CIRCLE = "circle",

me.radius = opts.circleOptions.radius;
me.vertex = [];
me.vertexCount = 0;
me.polygonArea = new Map();
me.isMoreArea = opts.areaOptions.isMoreArea || false;
me.squareArea = opts.areaOptions.areaMaxSquare || 1400;

@@ -71,3 +497,3 @@ me.map.events.add('boundschange', () => {

}
if (drawingType == DRAWING_MODE_FITBOUNDS) { return false }
if (drawingType == DRAWING_MODE_FITBOUNDS || drawingType == DRAWING_MODE_AREA) { me._drawingType = null; return false }
me._drawingType = drawingType;

@@ -224,6 +650,9 @@ }

me.map.container.events.types.click = undefined;
me._removeArea();
if (!me.isMoreArea) {
me._removeArea();
}
me._removeCenterMarker();
me._removeCircle();
if (me.isMoreArea && me.polygonArea.size === 5) { return false }
var createArea = () => {

@@ -247,2 +676,3 @@

me.map.container.events.add('mousemove', (event) => {
if (typeof event.get('coords') !== "undefined") {

@@ -255,3 +685,2 @@ patch.push(event.get('coords'));

me.map.container.events.once('mouseup', () => {
me.map.container.events.remove('mousemove');

@@ -263,2 +692,4 @@ me.map.container.events.types.mousemove = undefined;

me.map.geoObjects.add(me._area);
me.vertexCount++;
me.polygonArea.set(me.vertexCount, me._area);
me.map.events.fire('draw:area_create', me._convertCoordinates(patch));

@@ -270,2 +701,30 @@

if (me.isMoreArea) {
patchAreaLatLng = patch;
let patchAreaLatLngMax = me.findRoundPoints(patchAreaLatLng, 0.001);
if (patchAreaLatLngMax) {
if (patchAreaLatLngMax.length == 0) {
patchAreaLatLngMax = me.findRoundPoints(patchAreaLatLng, 0.01);
}
if (patchAreaLatLngMax.length == 0) {
patchAreaLatLngMax = me.findRoundPoints(patchAreaLatLng, 1);
}
if (patchAreaLatLngMax.length == 0) {
patchAreaLatLngMax = patchAreaLatLng;
}
}
var pointSelect = null;
var pointSelect = patchAreaLatLngMax[0];
for (var n = 0; n < patchAreaLatLngMax.length; n++) {
let item = patchAreaLatLngMax[n];
if (item[1] > pointSelect[1]) {
pointSelect = item;
}
}
me.createVertexArea(pointSelect);
}
});

@@ -284,2 +743,168 @@ }

DrawingManager.prototype.createVertexArea = function (pointSelect) {
me = this;
const geo = {
geometry: {
type: "Point",
coordinates: pointSelect
}
}
options = {
iconLayout: 'default#image',
iconImageSize: [24, 24],
iconImageOffset: [-20, -5],
iconImageHref: me.areaOptions.areaIconVertex,
draggable: false,
id: me.vertexCount,
}
_vertex = new ymaps.GeoObject(geo, options);
me.map.geoObjects.add(_vertex);
_vertex.events.add('click', function (e) {
if (me.polygonArea.get(e.get('target').options.get('id'))) {
let id = me.polygonArea.get(e.get('target').options.get('id'));
me.map.geoObjects.remove(e.get('target'));
me.map.geoObjects.remove(id);
me.polygonArea.delete(id);
me.map.events.fire('draw:area_remove', me._convertCoordinates());
}
});
me.vertex.push(_vertex);
},
DrawingManager.prototype.findRoundPoints = function (patch, round) {
let me = this;
var center = ymaps.util.bounds.getCenter(me._area.geometry.getBounds());
var result = [];
var roundMinLat = center[0] - round;
var roundMaxLat = center[0] + round;
for (var n = 0; n < patch.length; n++) {
let item = patch[n];
if (item[0] >= roundMinLat && item[0] <= roundMaxLat) {
if (item[1] > center[1]) {
result.push(item);
}
}
}
return result;
},
DrawingManager.prototype.calculateArea = function (feature) {
let me = this;
var geoJsonGeometry = me.getGeoJsonGeometry(feature);
return me.calculateJsonGeometryArea(geoJsonGeometry);
},
DrawingManager.prototype.getGeoJsonGeometry = function (feature) {
let me = this;
if (feature.type == 'Feature') {
return feature.geometry;
} else if (feature.geometry && feature.geometry.getType) {
if (feature.geometry.getType() == 'Circle') {
return {
type: 'Circle',
coordinates: feature.geometry.getCoordinates(),
radius: feature.geometry.getRadius(),
}
}
return {
type: feature.geometry.getType(),
coordinates: feature.geometry.getCoordinates(),
}
} else {
throw new Error('util.calculateArea: Unknown input object.');
}
},
DrawingManager.prototype.calculateJsonGeometryArea = function (geometry) {
let me = this;
let area = 0;
let i;
switch (geometry.type) {
case 'Polygon':
return me.polygonAreas(geometry.coordinates);
case 'MultiPolygon':
for (i = 0; i < geometry.coordinates.length; i++) {
area += me.polygonAreas(geometry.coordinates[i]);
}
return area;
case 'Rectangle':
return me.polygonAreas([[
geometry.coordinates[0],
[geometry.coordinates[0][0], geometry.coordinates[1][1]],
geometry.coordinates[1],
[geometry.coordinates[1][0], geometry.coordinates[0][1]],
geometry.coordinates[0]
]]);
case 'Circle':
return Math.PI * Math.pow(geometry.radius, 2);
case 'Point':
case 'MultiPoint':
case 'LineString':
case 'MultiLineString':
return 0;
}
},
DrawingManager.prototype.polygonAreas = function (coords) {
let me = this;
let area = 0;
if (coords && coords.length > 0) {
area += Math.abs(me.ringArea(coords[0]));
for (var i = 1; i < coords.length; i++) {
area -= Math.abs(me.ringArea(coords[i]));
}
}
return area;
},
DrawingManager.prototype.ringArea = function (coords) {
var p1;
var p2;
var p3;
var lowerIndex;
var middleIndex;
var upperIndex;
var i;
var area = 0;
var coordsLength = coords.length;
var longitude = ymaps.meta.coordinatesOrder == 'latlong' ? 1 : 0;
var latitude = ymaps.meta.coordinatesOrder == 'latlong' ? 0 : 1;
if (coordsLength > 2) {
for (i = 0; i < coordsLength; i++) {
if (i === coordsLength - 2) {
lowerIndex = coordsLength - 2;
middleIndex = coordsLength - 1;
upperIndex = 0;
} else if (i === coordsLength - 1) {
lowerIndex = coordsLength - 1;
middleIndex = 0;
upperIndex = 1;
} else {
lowerIndex = i;
middleIndex = i + 1;
upperIndex = i + 2;
}
p1 = coords[lowerIndex];
p2 = coords[middleIndex];
p3 = coords[upperIndex];
area += (rad(p3[longitude]) - rad(p1[longitude])) * Math.sin(rad(p2[latitude]));
}
let RADIUS = 6378137;
area = area * RADIUS * RADIUS / 2;
}
return area;
},
DrawingManager.prototype.rad = function (_) {
return _ * Math.PI / 180;
}
DrawingManager.prototype._redrawArea = function () {

@@ -373,3 +998,3 @@ let me = this;

me.map.setCenter(me._centerMarker.geometry.getCoordinates(), me.map.getZoom(), {
checkZoomRange: true
checkZoomRange: true,
});

@@ -379,3 +1004,3 @@ }

me.map.setCenter(me._centerMarker.geometry.getCoordinates(), 9, {
checkZoomRange: true
checkZoomRange: true,
});

@@ -387,17 +1012,44 @@ }

DrawingManager.prototype._convertCoordinates = function (coordinates) {
let me = this;
let positions = [];
if (!me.isMoreArea) {
for (var n = 0; n < coordinates.length; n++) {
let item = coordinates[n];
let position = {
latitude: item[0],
longitude: item[1],
}
positions.push(position);
}
for (var n = 0; n < coordinates.length; n++) {
let item = coordinates[n];
let position = {
latitude: item[0],
longitude: item[1],
let pos = {
positions
}
positions.push(position);
return pos;
} else {
me.polygonArea.forEach((key) => {
let latLng = [];
for (var n = 0; n < key.geometry.getCoordinates().length; n++) {
let item = key.geometry.getCoordinates()[n];
for (var i = 0; i < item.length; i++) {
let it = item[i];
let lnlt = {
latitude: it[0],
longitude: it[1],
}
latLng.push(lnlt);
}
positions.push(latLng);
}
});
const pos = {
positions
}
return pos;
}
let pos = {
positions
}
return pos;
};

@@ -687,3 +1339,3 @@

me.map.events.fire('draw:circle_remove', null);
me.map.events.fire('draw:circle_remove', []);
}

@@ -706,4 +1358,16 @@ };

me._area = null;
me.map.events.fire('draw:area_remove', null);
me.map.events.fire('draw:area_remove', []);
}
me.polygonArea.forEach((key) => {
me.map.geoObjects.remove(key);
});
me.vertex.forEach((key) => {
me.map.geoObjects.remove(key);
});
me.polygonArea.clear();
me.vertex = [];
me.currentAreaCount = 0;
};

@@ -710,0 +1374,0 @@

22

package.json

@@ -0,23 +1,23 @@

{
"name": "@h21-map/yandex-drawing-manager",
"scope":"@h21-map",
"version": "2.0.6",
"scope": "@h21-map",
"version": "4.0.2",
"description": "A library of Yandex Map JS API",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/novakand/h21-map-yandex-drawing-manager"
"type": "git",
"url": "git+https://github.com/novakand/h21-map-yandex-drawing-manager"
},
"keywords": [
"yandex",
"yandex-map",
"drawing-manager",
"angular"
"yandex",
"yandex-map",
"drawing-manager",
"angular"
],
"author": "",
"license": ""
}
}

@@ -8,4 +8,5 @@ # h21-map/yandex-drawing-manager

### How to use
Load google maps javascript api asynchronously
```bash
import { DrawingManager} from '@h21-map/yandex-drawing-manager'
```
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc