L.Polyline.Measure = L.Draw.Polyline.extend({ addHooks: function() { L.Draw.Polyline.prototype.addHooks.call(this); if (this._map) { this._markerGroup = new L.LayerGroup(); this._map.addLayer(this._markerGroup); this._markers = []; this._map.on('click', this._onClick, this); this._startShape(); } }, removeHooks: function () { L.Draw.Polyline.prototype.removeHooks.call(this); this._clearHideErrorTimeout(); //!\ Still useful when control is disabled before any drawing (refactor needed?) this._map.off('mousemove', this._onMouseMove); this._clearGuides(); this._container.style.cursor = ''; this._removeShape(); this._map.off('click', this._onClick, this); }, _startShape: function() { this._drawing = true; this._poly = new L.Polyline([], this.options.shapeOptions); this._container.style.cursor = 'crosshair'; this._updateTooltip(); this._map.on('mousemove', this._onMouseMove, this); }, _finishShape: function () { this._drawing = false; this._cleanUpShape(); this._clearGuides(); this._updateTooltip(); this._map.off('mousemove', this._onMouseMove, this); this._container.style.cursor = ''; }, _removeShape: function() { if (!this._poly) return; this._map.removeLayer(this._poly); delete this._poly; this._markers.splice(0); this._markerGroup.clearLayers(); }, _onClick: function(e) { if (!this._drawing) { this._removeShape(); this._startShape(); return; } }, _getTooltipText: function() { var labelText = L.Draw.Polyline.prototype._getTooltipText.call(this); if (!this._drawing) { labelText.text = ''; } return labelText; } }); L.Control.MeasureControl = L.Control.extend({ statics: { TITLE: 'Measure distances' }, options: { position: 'topleft', handler: {} }, toggle: function() { if (this.handler.enabled()) { this.handler.disable.call(this.handler); } else { this.handler.enable.call(this.handler); } }, onAdd: function(map) { var className = 'leaflet-control-draw'; this._container = L.DomUtil.create('div', 'leaflet-bar'); this.handler = new L.Polyline.Measure(map, this.options.handler); this.handler.on('enabled', function () { L.DomUtil.addClass(this._container, 'enabled'); }, this); this.handler.on('disabled', function () { L.DomUtil.removeClass(this._container, 'enabled'); }, this); var link = L.DomUtil.create('a', className+'-measure', this._container); link.href = '#'; link.title = L.Control.MeasureControl.TITLE; L.DomEvent .addListener(link, 'click', L.DomEvent.stopPropagation) .addListener(link, 'click', L.DomEvent.preventDefault) .addListener(link, 'click', this.toggle, this); return this._container; } }); L.Map.mergeOptions({ measureControl: false }); L.Map.addInitHook(function () { if (this.options.measureControl) { this.measureControl = L.Control.measureControl().addTo(this); } }); L.Control.measureControl = function (options) { return new L.Control.MeasureControl(options); };