add readonly functionality

Author: Nathan

dist/leaflet.plotter.min.js

@@ -5,7 +5,8 @@ L.Polyline.plotter = L.Polyline.extend({
     _existingLatLngs: [],
     options: {
         weight: 2,
-        color: '#000'
+        color: '#000',
+        readOnly: false,
     },
     initialize: function (latlngs, options){
         this._setExistingLatLngs(latlngs);
@@ -15,14 +16,39 @@ L.Polyline.plotter = L.Polyline.extend({
         L.Polyline.prototype.onAdd.call(this, map);
         this._map = map;
         this._plotExisting();
-        this._bindMapClick();
+        if(!this.options.readOnly){
+            this._bindMapClick();
+        }
     },
     setLatLngs: function(latlngs){
         L.Polyline.prototype.setLatLngs.call(this, latlngs);
     },
+    setReadOnly: function(readOnly){
+        if(readOnly && !this.options.readOnly){
+            var markerFunction = '_unbindMarkerEvents';
+            var halfwayMarkerFunction = '_unbindHalfwayMarker';
+            this._unbindMapClick();
+        }else if(!readOnly && this.options.readOnly){
+            var markerFunction = '_bindMarkerEvents';
+            var halfwayMarkerFunction = '_bindMarkerEvents';
+            this._bindMapClick();
+        }
+        if(typeof markerFunction !== 'undefined'){
+            this.options.readOnly = readOnly;
+            for(index in this._halfwayPointMarkers){
+                this[halfwayMarkerFunction](this._halfwayPointMarkers[index]);
+            }
+            for(index in this._lineMarkers){
+                this[markerFunction](this._lineMarkers[index]);
+            }
+        }
+    },
     _bindMapClick: function(){
         this._map.on('click', this._addNewMarker, this);
     },
+    _unbindMapClick: function(){
+        this._map.off('click', this._addNewMarker, this);
+    },
     _setExistingLatLngs: function(latlngs){
         this._existingLatLngs = latlngs;
     },
@@ -31,13 +57,29 @@ L.Polyline.plotter = L.Polyline.extend({
         this._redrawHalfwayPoints();
     },
     _getNewMarker: function(latlng, options){
-        options.draggable = true;
         return new L.marker(latlng, options);
     },
+    _unbindMarkerEvents: function(marker){
+        marker.off('click', this._removePoint, this);
+        marker.off('drag', this._replot, this);
+        marker.dragging.disable()
+    },
+    _bindMarkerEvents: function(marker){
+        marker.on('click', this._removePoint, this);
+        marker.on('drag', this._replot, this);
+        marker.dragging.enable()
+    },
+    _bindHalfwayMarker: function(marker){
+        marker.on('click', this._addHalfwayPoint, this);
+    },
+    _unbindHalfwayMarker: function(marker){
+        marker.off('click', this._addHalfwayPoint, this);
+    },
     _addToMapAndBindMarker: function(newMarker){
         newMarker.addTo(this._map);
-        newMarker.on('click', this._removePoint, this);
-        newMarker.on('drag', this._replot, this);
+        if(!this.options.readOnly){
+            this._bindMarkerEvents(newMarker);
+        }
     },
     _removePoint: function(e){
         this._map.removeLayer(this._lineMarkers[this._lineMarkers.indexOf(e.target)]);
@@ -52,11 +94,10 @@ L.Polyline.plotter = L.Polyline.extend({
     },
     _redrawHalfwayPoints: function(){
         for(index in this._halfwayPointMarkers){
-            index = parseInt(index);
             this._map.removeLayer(this._halfwayPointMarkers[index]);
         }
+        this._halfwayPointMarkers = [];
         for(index in this._lineMarkers){
-            index = parseInt(index);
             if(typeof this._lineMarkers[index + 1] === 'undefined'){
                 return;
             }
@@ -65,7 +106,9 @@ L.Polyline.plotter = L.Polyline.extend({
                 (this._lineMarkers[index].getLatLng().lng + this._lineMarkers[index + 1].getLatLng().lng) / 2,
             ], { icon: this._editIcon, opacity: 0.5 }).addTo(this._map);
             halfwayMarker.index = index;
-            halfwayMarker.on('click', this._addHalfwayPoint, this);
+            if(!this.options.readOnly){
+                this._bindHalfwayMarker(halfwayMarker);
+            }
             this._halfwayPointMarkers.push(halfwayMarker);
         }
     },
@@ -96,5 +139,5 @@ L.Polyline.plotter = L.Polyline.extend({
 });
 
 L.Polyline.Plotter = function(latlngs, options){
-	return new L.Polyline.plotter(latlngs, options);
+    return new L.Polyline.plotter(latlngs, options);
 };