Merge pull request #24 from codeofsumit/develop

Added hintline from cursor to last polygon point

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
 /node_modules/
+/bower_components/

dist/leaflet.pm.js

@@ -182,20 +182,36 @@ L.PM.Draw.Poly = {
 
         this._map = map;
 
+        // create a new layergroup
         this._layerGroup = new L.LayerGroup();
         this._layerGroup.addTo(this._map);
 
+        // this is the polyLine that'll make up the polygon
         this._polyline = L.polyline([], {color: 'red'});
         this._layerGroup.addLayer(this._polyline);
 
+        // this is the hintline from the mouse cursor to the last marker
+        this._hintline = L.polyline([], {
+            color: 'red',
+            dashArray: [5, 5]
+        });
+        this._layerGroup.addLayer(this._hintline);
+
+        // change map cursor
         this._map._container.style.cursor = 'crosshair';
 
+        // create a polygon-point on click
         this._map.on('click', this._createPolygonPoint, this);
 
+        // sync the hintline on mousemove
+        this._map.on('mousemove', this._syncHintLine, this);
+
+        // give the map the function to disable draw mode
         this._map.disableDraw = function() {
             self.disable();
         };
 
+        // fire drawstart event
         this._map.fireEvent('pm:drawstart');
 
     },
@@ -209,6 +225,18 @@ L.PM.Draw.Poly = {
 
         this._map.fireEvent('pm:drawend');
 
+    },
+    _syncHintLine: function(e) {
+
+        var polyPoints = this._polyline.getLatLngs();
+
+        if(polyPoints.length > 0) {
+            var lastPolygonPoint = polyPoints[polyPoints.length - 1];
+            this._hintline.setLatLngs([lastPolygonPoint, e.latlng]);
+        }
+
+
+
     },
     _createPolygonPoint: function(e) {
 
@@ -218,6 +246,9 @@ L.PM.Draw.Poly = {
         this._polyline.addLatLng(e.latlng);
         this._createMarker(e.latlng, first);
 
+
+        this._hintline.setLatLngs([e.latlng, e.latlng]);
+
     },
     _finishPolygon: function() {
 

src/js/L.PM.Draw.Poly.js

@@ -6,20 +6,36 @@ L.PM.Draw.Poly = {
 
         this._map = map;
 
+        // create a new layergroup
         this._layerGroup = new L.LayerGroup();
         this._layerGroup.addTo(this._map);
 
+        // this is the polyLine that'll make up the polygon
         this._polyline = L.polyline([], {color: 'red'});
         this._layerGroup.addLayer(this._polyline);
 
+        // this is the hintline from the mouse cursor to the last marker
+        this._hintline = L.polyline([], {
+            color: 'red',
+            dashArray: [5, 5]
+        });
+        this._layerGroup.addLayer(this._hintline);
+
+        // change map cursor
         this._map._container.style.cursor = 'crosshair';
 
+        // create a polygon-point on click
         this._map.on('click', this._createPolygonPoint, this);
 
+        // sync the hintline on mousemove
+        this._map.on('mousemove', this._syncHintLine, this);
+
+        // give the map the function to disable draw mode
         this._map.disableDraw = function() {
             self.disable();
         };
 
+        // fire drawstart event
         this._map.fireEvent('pm:drawstart');
 
     },
@@ -33,6 +49,18 @@ L.PM.Draw.Poly = {
 
         this._map.fireEvent('pm:drawend');
 
+    },
+    _syncHintLine: function(e) {
+
+        var polyPoints = this._polyline.getLatLngs();
+
+        if(polyPoints.length > 0) {
+            var lastPolygonPoint = polyPoints[polyPoints.length - 1];
+            this._hintline.setLatLngs([lastPolygonPoint, e.latlng]);
+        }
+
+
+
     },
     _createPolygonPoint: function(e) {
 
@@ -42,6 +70,9 @@ L.PM.Draw.Poly = {
         this._polyline.addLatLng(e.latlng);
         this._createMarker(e.latlng, first);
 
+
+        this._hintline.setLatLngs([e.latlng, e.latlng]);
+
     },
     _finishPolygon: function() {