leaflet-forbiddenarea - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

docs/leaflet.forbiddenarea.js

@@ -11,3 +11,4 @@ (function() {
             distanceForbiddenArea: 60,
-            msgForbidden: 'Other marker are too close !'
+            msgForbidden: 'Other marker are too close !',
+            forbiddenIcon: undefined
         },
@@ -76,7 +77,16 @@
 
-            this.forbiddenArea ? this._tooltip.updateContent({ text: this.options.msgForbidden }) : this._tooltip.updateContent({ text: 'Click map to place marker' });
+            if ( this.forbiddenArea) {
+              this._tooltip.updateContent({ text: this.options.msgForbidden })
+              if (marker._icon) {
+                marker.setOpacity(1);
+                marker.setIcon(this.options.forbiddenIcon);
+              }
+            } else {
+                marker.setOpacity(0);
+                this._tooltip.updateContent({ text: 'Click map to place marker' });
+            }
         },
 
         _fireCreatedEvent: function() {
-            var marker = new L.Marker.Touch(this._marker.getLatLng(), { icon: this.options.icon, forbiddenArea: true, guides: this.options.guideLayers, distanceForbiddenArea: this.options.distanceForbiddenArea });
+            var marker = new L.Marker.Touch(this._marker.getLatLng(), { icon: this.options.icon, forbiddenArea: true, guides: this.options.guideLayers, distanceForbiddenArea: this.options.distanceForbiddenArea, forbiddenIcon: this.options.forbiddenIcon });
             L.Draw.Feature.prototype._fireCreatedEvent.call(this, marker);
@@ -134,4 +144,7 @@ }
             marker.dragging.enable();
-            marker.on('dragend', this._onDragEnd, marker);
-            marker.on('dragstart', this._onDragStart, marker);
+            marker.on('dragend', this._onDragEnd);
+            marker.on('dragstart', this._onDragStart);
+            if (marker.options.forbiddenArea) {
+              marker.on('move', L.bind(this._onDragMove, null, marker, marker.options.forbiddenIcon.options));
+            }
             this._toggleMarkerHighlight();
@@ -145,2 +158,6 @@ },
             marker.off('dragend', this._onDragEnd, marker);
+            marker.off('dragstart', this._onDragStart, marker);
+            if (marker.options.forbiddenArea) {
+               marker.off('move');
+            }
             this._toggleMarkerHighlight();
@@ -152,2 +169,26 @@ },
         },
+        _onDragMove: function(e, defaultIcon) {
+            //change icon if marker is in forbidden area else default icon
+            var marker = e,
+                latlng = marker.getLatLng();
+            var guides = [];
+            marker.options.guides.forEach(function(position) {
+                position._leaflet_id !== marker._leaflet_id ? guides.push(position) : null;
+            })
+
+            var closest = geomFunction.findClosestLayer(marker._map,
+                guides,
+                latlng,
+                marker.options.distanceForbiddenArea,
+                false);
+
+            closest = closest || { layer: null, latlng: null };
+
+            this.forbiddenArea = closest.layer && closest.latlng;
+            if (this.forbiddenArea) {
+               L.DomUtil.addClass(marker._icon, defaultIcon.className);
+            } else {
+               L.DomUtil.removeClass(marker._icon, defaultIcon.className);
+            }
+        },
         _onDragEnd: function(e) {
@@ -154,0 +195,0 @@ var marker = e.target ? e.target : e,

leaflet.forbiddenarea.js

@@ -11,3 +11,4 @@ (function() {
             distanceForbiddenArea: 60,
-            msgForbidden: 'Other marker are too close !'
+            msgForbidden: 'Other marker are too close !',
+            forbiddenIcon: undefined
         },
@@ -76,7 +77,16 @@
 
-            this.forbiddenArea ? this._tooltip.updateContent({ text: this.options.msgForbidden }) : this._tooltip.updateContent({ text: 'Click map to place marker' });
+            if ( this.forbiddenArea) {
+              this._tooltip.updateContent({ text: this.options.msgForbidden })
+              if (marker._icon) {
+                marker.setOpacity(1);
+                marker.setIcon(this.options.forbiddenIcon);
+              }
+            } else {
+                marker.setOpacity(0);
+                this._tooltip.updateContent({ text: 'Click map to place marker' });
+            }
         },
 
         _fireCreatedEvent: function() {
-            var marker = new L.Marker.Touch(this._marker.getLatLng(), { icon: this.options.icon, forbiddenArea: true, guides: this.options.guideLayers, distanceForbiddenArea: this.options.distanceForbiddenArea });
+            var marker = new L.Marker.Touch(this._marker.getLatLng(), { icon: this.options.icon, forbiddenArea: true, guides: this.options.guideLayers, distanceForbiddenArea: this.options.distanceForbiddenArea, forbiddenIcon: this.options.forbiddenIcon });
             L.Draw.Feature.prototype._fireCreatedEvent.call(this, marker);
@@ -134,4 +144,7 @@ }
             marker.dragging.enable();
-            marker.on('dragend', this._onDragEnd, marker);
-            marker.on('dragstart', this._onDragStart, marker);
+            marker.on('dragend', this._onDragEnd);
+            marker.on('dragstart', this._onDragStart);
+            if (marker.options.forbiddenArea) {
+              marker.on('move', L.bind(this._onDragMove, null, marker, marker.options.forbiddenIcon.options));
+            }
             this._toggleMarkerHighlight();
@@ -145,2 +158,6 @@ },
             marker.off('dragend', this._onDragEnd, marker);
+            marker.off('dragstart', this._onDragStart, marker);
+            if (marker.options.forbiddenArea) {
+               marker.off('move');
+            }
             this._toggleMarkerHighlight();
@@ -152,2 +169,26 @@ },
         },
+        _onDragMove: function(e, defaultIcon) {
+            //change icon if marker is in forbidden area else default icon
+            var marker = e,
+                latlng = marker.getLatLng();
+            var guides = [];
+            marker.options.guides.forEach(function(position) {
+                position._leaflet_id !== marker._leaflet_id ? guides.push(position) : null;
+            })
+
+            var closest = geomFunction.findClosestLayer(marker._map,
+                guides,
+                latlng,
+                marker.options.distanceForbiddenArea,
+                false);
+
+            closest = closest || { layer: null, latlng: null };
+
+            this.forbiddenArea = closest.layer && closest.latlng;
+            if (this.forbiddenArea) {
+               L.DomUtil.addClass(marker._icon, defaultIcon.className);
+            } else {
+               L.DomUtil.removeClass(marker._icon, defaultIcon.className);
+            }
+        },
         _onDragEnd: function(e) {
@@ -154,0 +195,0 @@ var marker = e.target ? e.target : e,

package.json

 {
     "name": "leaflet-forbiddenarea",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "Prohibit the placement of markers if they are too close to another layer",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -19,2 +19,3 @@ Leaflet.ForbiddenArea.js
 * install it via your favorite package manager:
+    * `npm i leaflet-forbiddenarea`
     * `bower install [e-mail]:makinacorpus/Leaflet.ForbiddenArea.git`
@@ -79,3 +80,3 @@ * download the repository and import the `leaflet.forbiddenarea.js` file in your app.
 
-### 0.0.1
+### 0.0.2
 
@@ -87,4 +88,3 @@ * prohibit the placement of a marker if it is too close to another.ex
 
-* Change marker color when it's in forbidden area (Creation and Edition)
-* Keep default icon marker for forbidden marker type, but can be cool if we can choose an other if we want
+* Keep default icon marker for forbidden marker type, but can be cool if we can choose an other if we want (toolbar)
 * Show forbidden zone around layer
@@ -91,0 +91,0 @@ Authors

No alert changes

Improved metrics

Total package byte prevSize

35105

increased by16.1%

Number of package files

11

increased by10%

Lines of code

537

increased by16.49%

No dependency changes