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

Comparing version 1.0.4 to 1.0.7

index.js

 
 let DRAWING_MODE_MARKER = "marker";
 let DRAWING_MODE_CIRCLE = "circle";
+let DRAWING_MODE_AREA = "area";
 
@@ -8,13 +9,19 @@
 
-    this.extend(DrawingManager, google.maps.OverlayView);
+    let me = this;
+    me.extend(DrawingManager, google.maps.OverlayView);
 
-    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;
+    me.map = map;
+    me._opts = opts;
+    me._drawingType = opts.drawingMode || DRAWING_MODE_MARKER;
+    me._fitBounds = opts._fitBounds || true;
+    me.markerOptions = opts.markerOptions || {};
+    me.circleOptions = opts.circleOptions || {};
+    me.areaOptions = opts.areaOptions || {};
+    me._enableDraw = opts.enableDraw;
+    me.radius = opts.circleOptions.radius;
+    isInit = true;
 
+    google.maps.event.addListener(me.map, 'idle', () => {
+        google.maps.event.trigger(me, 'draw:zoom_map', me.map.getZoom());
+    })
 }
@@ -24,3 +31,4 @@
 
-    var me = this;
+    let me = this;
+
     google.maps.event.addListener(this.getMap(), 'click', function (event) {
@@ -37,3 +45,5 @@ google.maps.event.trigger(me, 'click', event);
 DrawingManager.prototype.setDrawingMode = function (drawingType) {
+
     let me = this;
+
     this._drawingType = drawingType;
@@ -48,2 +58,8 @@
             break;
+        case DRAWING_MODE_AREA:
+            me._bindArea();
+            break;
+        default:
+            me._redraw();
+            break;
     }
@@ -71,29 +87,139 @@ }
 
+DrawingManager.prototype._redraw = function () {
 
+    let me = this;
 
-DrawingManager.prototype._bindMarker = function () {
+    me._removeArea();
+    me._removeCenterMarker();
+    me._removeCircle();
+}
 
+DrawingManager.prototype._bindArea = function () {
+
     let me = this;
 
-    if (me._centerMarker) {
-        me._centerMarker.setMap(null);
-        google.maps.event.trigger(me, 'draw:marker_remove', null);
+    me._removeArea();
+    me._removeCenterMarker();
+    me._removeCircle();
+
+    var createArea = () => {
+
+        me._setDrawing(false);
+
+        const polygonOptions = {
+            map: me.map,
+            strokeColor: me.areaOptions.strokeColor,
+            strokeOpacity: me.areaOptions.strokeOpacity,
+            fillColor: me.areaOptions.fillColor,
+            fillOpacity: me.areaOptions.fillOpacity,
+            strokeWeight: me.areaOptions.strokeWeight,
+            clickable: false,
+            editable: false
+        }
+
+
+        me.area = new google.maps.Polyline(polygonOptions);
+
+        var move = google.maps.event.addListener(me.map, 'mousemove', function (e) {
+            me.area.getPath().push(e.latLng);
+        });
+
+        var moveUp = google.maps.event.addListenerOnce(me.map, 'mouseup', () => {
+
+            google.maps.event.removeListener(move);
+            google.maps.event.removeListener(moveUp);
+
+            var path = me.area.getPath();
+
+            me.area.setMap(null);
+
+            const opts = {
+                map: me.map,
+                strokeColor: me.areaOptions.strokeColor,
+                strokeOpacity: me.areaOptions.strokeOpacity,
+                fillColor: me.areaOptions.fillColor,
+                fillOpacity: me.areaOptions.fillOpacity,
+                strokeWeight: me.areaOptions.strokeWeight,
+                clickable: false,
+                path: path,
+                editable: false
+            }
+
+            google.maps.event.trigger(me, 'draw:area_create', me._convertCoordinates(me.area.getPath().getArray()));
+
+            me.area = new google.maps.Polygon(opts);
+
+            google.maps.event.clearListeners(me.map.getDiv(), 'mousedown');
+
+            me._setDrawing(true);
+
+            me._fitBoundsArea(me.area.getPath().getArray());
+
+
+        });
     }
 
-    google.maps.event.clearListeners(me, 'click');
+    google.maps.event.addDomListener(me.map.getDiv(), 'mousedown', (e) => {
+        console.log('mousedown')
+        createArea();
+    });
+}
 
+DrawingManager.prototype._setDrawing = function (enabled) {
 
-    if (me.circle) {
-        me.circle.setMap(null);
-        me._vertexMarker.setMap(null);
+    let me = this;
+
+    me.map.setOptions({
+        draggable: enabled,
+        scrollwheel: enabled,
+        disableDoubleClickZoom: enabled
+    });
+}
+
+DrawingManager.prototype._fitBoundsArea = function (coordinates) {
+
+    let me = this;
+
+    let bounds = new google.maps.LatLngBounds();
+    for (var n = 0; n < coordinates.length; n++) {
+        bounds.extend(coordinates[n]);
     }
+    me.map.panToBounds(bounds);
+    me.map.fitBounds(bounds);
+}
 
-    var createCenterMarker = (e) => {
+DrawingManager.prototype._convertCoordinates = function (coordinates) {
 
-        if (me._centerMarker) {
-            me._centerMarker.setMap(null);
-            me._centerMarker = null;
-            google.maps.event.trigger(me, 'draw:marker_remove', null);
+    let positions = [];
+
+    for (var n = 0; n < coordinates.length; n++) {
+        let item = coordinates[n];
+        let position = {
+            latitude: item.lat(),
+            longitude: item.lng(),
         }
+        positions.push(position);
+    }
+    return positions;
+}
 
+
+DrawingManager.prototype._bindMarker = function () {
+
+    let me = this;
+
+    me._removeArea();
+    me._removeCenterMarker();
+
+    google.maps.event.clearListeners(me, 'click');
+    google.maps.event.clearListeners(me, 'mousedown');
+    google.maps.event.clearListeners(me, 'mouseup');
+
+    me._removeCircle();
+
+    var createCenterMarker = (e) => {
+
+        me._removeCenterMarker();
+        me._removeCircle();
+
         if (e) {
@@ -103,8 +229,3 @@ me._setPosition(e);
 
-        if (me.circle) {
-            me.circle.setMap(null);
-            me._vertexMarker.setMap(null);
-        }
 
-
         if (me.position) {
@@ -126,3 +247,3 @@ me._centerMarker = new google.maps.Marker({
 
-            google.maps.event.trigger(me, 'draw:marker_create', null);
+            google.maps.event.trigger(me, 'draw:marker_create', me._getPosition());
             me._centerMarker.setCursor('default');
@@ -146,10 +267,2 @@ me.position = null;
 
-
-DrawingManager.prototype.setEnableDraw = function (enabled) {
-
-    this._enableDraw = enabled;
-}
-
-DrawingManager.prototype.remove = function () { }
-
 DrawingManager.prototype._bindCircle = function () {
@@ -159,7 +272,3 @@
 
-    if (me.circle) {
-        me.circle.setMap(null);
-        me._vertexMarker.setMap(null);
-        google.maps.event.trigger(me, 'draw:circle_remove', null);
-    }
+    me._removeCircle();
 
@@ -195,2 +304,44 @@ if (me._centerMarker) {
 
+DrawingManager.prototype.setEnableDraw = function (enabled) {
+
+    this._enableDraw = enabled;
+}
+
+DrawingManager.prototype._removeCircle = function () {
+
+    let me = this;
+
+    if (me.circle) {
+        me.circle.setMap(null);
+        me.circle = null;
+        me._vertexMarker.setMap(null);
+    }
+
+}
+
+DrawingManager.prototype._removeCenterMarker = function () {
+
+    let me = this;
+
+
+    if (me._centerMarker) {
+        me._centerMarker.setMap(null);
+        me._centerMarker = null;
+        google.maps.event.trigger(me, 'draw:marker_remove', null);
+    }
+
+}
+
+DrawingManager.prototype._removeArea = function () {
+
+    let me = this;
+
+    if (me.area) {
+        me.area.setMap(null);
+        me.area = null;
+        google.maps.event.trigger(me, 'draw:area_remove', null);
+    }
+}
+
+
 DrawingManager.prototype._createVertexMarker = function () {
@@ -202,4 +353,2 @@
     me.to = me.destination(this._centerMarker.getPosition(), 90, this.radius);
-
-
     me.fillColor = 'white';
@@ -222,3 +371,2 @@
 
-
     me._vertexMarker.setMap(me.map);
@@ -290,7 +438,7 @@ me._vertexMarker.setCursor('col-resize');
 
-    google.maps.event.addListener(me._centerMarker, 'dragend', function (event) {
+    google.maps.event.addListener(me._centerMarker, 'dragend', function () {
         google.maps.event.trigger(me, 'draw:circle_center_complete', me._getInfo());
     });
 
-    google.maps.event.addListener(me._centerMarker, 'click', function (event) {
+    google.maps.event.addListener(me._centerMarker, 'click', function () {
         google.maps.event.trigger(me, 'draw:marker_click', me._getInfo());
@@ -403,4 +551,16 @@ });
 
+DrawingManager.prototype._getPosition = function () {
+
+    let me = this;
+
+    let position = {
+        latitude: me._centerMarker.getPosition().lat(),
+        longitude: me._centerMarker.getPosition().lng()
+    }
+
+    return position;
+}
+
 if (typeof module == 'object') {
     module.exports = { default: DrawingManager, DrawingManager: DrawingManager };
 }

package.json

 {
   "name": "@h21-map/google-drawing-manager",
   "scope":"@h21-map",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "description": "A library of Google Map JS API",
@@ -6,0 +6,0 @@ "main": "index.js",

README.md

@@ -0,0 +0,0 @@ # h21-map/google-drawing-manager

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15350

increased by40.8%

Lines of code

395

increased by40.57%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes