L.Draw.Polygon = L.Draw.Polyline.extend({ statics: { TYPE: 'polygon' }, Poly: L.Polygon, options: { shapeOptions: { stroke: true, color: '#f06eaa', weight: 4, opacity: 0.5, fill: true, fillColor: null, //same as color by default fillOpacity: 0.2, clickable: true } }, initialize: function (map, options) { L.Draw.Polyline.prototype.initialize.call(this, map, options); // Save the type so super can fire, need to do this as cannot do this.TYPE :( this.type = L.Draw.Polygon.TYPE; }, _updateFinishHandler: function () { var markerCount = this._markers.length; // The first marker shold have a click handler to close the polygon if (markerCount === 1) { this._markers[0].on('click', this._finishShape, this); } // Add and update the double click handler if (markerCount > 2) { this._markers[markerCount - 1].on('dblclick', this._finishShape, this); // Only need to remove handler if has been added before if (markerCount > 3) { this._markers[markerCount - 2].off('dblclick', this._finishShape, this); } } }, _getTooltipText: function () { var text; if (this._markers.length === 0) { text = 'Click to start drawing shape.'; } else if (this._markers.length < 3) { text = 'Click to continue drawing shape.'; } else { text = 'Double click to close this shape.'; } return { text: text }; }, _shapeIsValid: function () { return this._markers.length >= 3; }, _vertexAdded: function () { //calc area here }, _cleanUpShape: function () { var markerCount = this._markers.length; if (markerCount > 0) { this._markers[0].off('click', this._finishShape, this); if (markerCount > 2) { this._markers[markerCount - 1].off('dblclick', this._finishShape, this); } } } });