diff --git a/src/leaflet.measure.js b/src/leaflet.measure.js index 9981602..5bbd85b 100644 --- a/src/leaflet.measure.js +++ b/src/leaflet.measure.js @@ -93,6 +93,7 @@ }, _enableMeasureLine: function (ev) { L.DomEvent.stopPropagation(ev); + L.DomEvent.preventDefault(ev); this._measureHandler = new L.MeasureAction(this._map, { model: "distance", color: this.options.color, @@ -101,6 +102,7 @@ }, _enableMeasureArea: function (ev) { L.DomEvent.stopPropagation(ev); + L.DomEvent.preventDefault(ev); this._measureHandler = new L.MeasureAction(this._map, { model: "area", color: this.options.color, @@ -269,11 +271,20 @@ } }, _enableMeasure: function () { + var map = this._map; this._trail = { - overlays: [], points: [], + overlays: L.featureGroup(), + canvas: map.options.preferCanvas || false, }; - var map = this._map; + if ( map.options.preferCanvas ) { + map.options.preferCanvas = false; + console.warn( 'Temporarily reset map.options.prefersCanvas to false' ); + //HACK: With canvas rendering enabled (and no other markers present on the map), this will create an permanent + // overlaying layer of type L.Canvas that swallows mouse events. + } + map.addLayer( this._trail.overlays ); + L.DomUtil.addClass(map._container, "leaflet-measure-map"); map.contextMenu && map.contextMenu.disable(); this._measurementStarted = true; @@ -339,8 +350,7 @@ interactive: false, }); } - this._map.addLayer(this._directPath); - this._trail.overlays.push(this._directPath); + this._trail.overlays.addLayer(this._directPath); } else { this._directPath.addLatLng(latlng); } @@ -362,8 +372,7 @@ interactive: false, }); } - this._map.addLayer(this._measurePath); - this._trail.overlays.push(this._measurePath); + this._trail.overlays.addLayer(this._measurePath); } else { this._measurePath.addLatLng(latlng); } @@ -380,8 +389,7 @@ radius: 3, interactive: false, }); - this._map.addLayer(marker); - this._trail.overlays.push(marker); + this._trail.overlays.addLayer(marker); }, _addLable: function (latlng, content, className, ended) { var lable = new L.MeasureLable({ @@ -389,20 +397,16 @@ content: content, className: className, }); - this._map.addLayer(lable); - this._trail.overlays.push(lable); + this._trail.overlays.addLayer(lable); if (ended) { var closeButton = lable.enableClose(); L.DomEvent.on(closeButton, "click", this._clearOverlay, this); } }, _clearOverlay: function () { - var i = 0, - overlays = this._trail.overlays, - length; - for (length = overlays.length; i < length; i++) { - this._map.removeLayer(overlays[i]); - } + this._map.removeLayer(this._trail.overlays); + this._trail.overlays = null; + this._map.options.preferCanvas = this._trail.canvas; }, toRadians: function (deg) { return deg * (Math.PI / 180);