Map Dragging Issue

[anujdivesh]

Hi:
I am using leaflet-side-by-side to compare two tile layers. When i drag the burger icon, the map drags instead of the dragger line.

Thanks.

[haexyh]

this plugin doesn't support version 1.8.0 . I downgraded to 1.7.1 and it works fine. The 1.8.0 release does contain breaking changes. This library is affected.
@anujdivesh

[NaomiRadke]

Hi!
I have a similar problem: I am using vue-leaflet (https://github.com/vue-leaflet/vue-leaflet) which in turn is based on leaflet version 1.6.0.
Since I last updated my web browser (Chrome) I have troubles moving the slider. Sometimes the slider moves a tiny bit but then the map is dragged instead.

Is there any hack how to make the map drag stock while moving the slider?
My current solution is disabling map dragging when the side-by-side slider is added like so:

this.sideBySide.addTo(map);        
        map.dragging.disable()

And then enable it again, when removing the slider. But that's not what I ideally want, since I won't be able to drag the map while the slider is added to the map. I only want to disable the map when the slider is moved.
I was fiddling around with the dividermove event of leaflet side-by-side like so:

this.sideBySide.on('dividermove', map.dragging.disable())

Yet, the event is not getting fired.

Any help or hints are welcome!

[lukastemberga]

Found a working solution... (but not fully tested!)
I changed index.js of module.

1. step remove v0.7 backwards compatibility (code below):

function on (el, types, fn, context) {
  types.split(' ').forEach(function (type) {
    L.DomEvent.on(el, type, fn, context)
  })
}

// Leaflet v0.7 backwards compatibility
function off (el, types, fn, context) {
  types.split(' ').forEach(function (type) {
    L.DomEvent.off(el, type, fn, context)
  })
}

2. Fix deprecated events mixin:
   includes: L.Mixin.Events,
   change this to:
   includes: L.Evented.prototype,

3. Fix _addEvents and _removeEvents functions:
   There seems to be a problem with this ternary: L.Browser.touch ? 'touchstart' : 'mousedown'
   That is why I split those functions into separate eventListeners.

Old code:

_addEvents: function () {
    var range = this._range
    var map = this._map
    if (!map || !range) return
    map.on('move', this._updateClip, this)
    map.on('layeradd layerremove', this._updateLayers, this)
    on(range, getRangeEvent(range), this._updateClip, this)
    on(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
    on(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
  },

  _removeEvents: function () {
    var range = this._range
    var map = this._map
    if (range) {
      off(range, getRangeEvent(range), this._updateClip, this)
      off(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
      off(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
    }
    if (map) {
      map.off('layeradd layerremove', this._updateLayers, this)
      map.off('move', this._updateClip, this)
    }
  }

Replaced with:

_addEvents: function () {
    var range = this._range;
    var map = this._map;
    if (!map || !range) return;
    map.on("move", this._updateClip, this);
    map.on("layeradd layerremove", this._updateLayers, this);
    L.DomEvent.on(range, getRangeEvent(range), this._updateClip, this);
    L.DomEvent.on(range, "touchstart", cancelMapDrag, this);
    L.DomEvent.on(range, "touchend", uncancelMapDrag, this);
    L.DomEvent.on(range, "mousedown", cancelMapDrag, this);
    L.DomEvent.on(range, "mouseup", uncancelMapDrag, this);
  },

  _removeEvents: function () {
    var range = this._range;
    var map = this._map;
    if (range) {
      L.DomEvent.off(range, getRangeEvent(range), this._updateClip, this);
      L.DomEvent.off(range, "touchstart", cancelMapDrag, this);
      L.DomEvent.off(range, "touchend", uncancelMapDrag, this);
      L.DomEvent.off(range, "mousedown", cancelMapDrag, this);
      L.DomEvent.off(range, "mouseup", uncancelMapDrag, this);
    }
    if (map) {
      map.off("layeradd layerremove", this._updateLayers, this);
      map.off("move", this._updateClip, this);
    }
  },

I got this working with React leaflet (Leaflet v.1.8.0) and I haven't tested this solution a lot. There is probably a way to get it working so that support for v.0.7 doesn't need to be removed.

Hope this helps someone. If I catch some time, I'll make a pull request or make a new fork.

[tkozlow]

Hi: I am using leaflet-side-by-side to compare two tile layers. When i drag the burger icon, the map drags instead of the dragger line.

Thanks.

Same issue here.

[tkozlow]

Found a working solution... (but not fully tested!) I changed index.js of module.

1. step remove v0.7 backwards compatibility (code below):

function on (el, types, fn, context) {
  types.split(' ').forEach(function (type) {
    L.DomEvent.on(el, type, fn, context)
  })
}

// Leaflet v0.7 backwards compatibility
function off (el, types, fn, context) {
  types.split(' ').forEach(function (type) {
    L.DomEvent.off(el, type, fn, context)
  })
}

2. Fix deprecated events mixin:
   includes: L.Mixin.Events,
   change this to:
   includes: L.Evented.prototype,
3. Fix _addEvents and _removeEvents functions:
   There seems to be a problem with this ternary: L.Browser.touch ? 'touchstart' : 'mousedown'
   That is why I split those functions into separate eventListeners.

Old code:

_addEvents: function () {
    var range = this._range
    var map = this._map
    if (!map || !range) return
    map.on('move', this._updateClip, this)
    map.on('layeradd layerremove', this._updateLayers, this)
    on(range, getRangeEvent(range), this._updateClip, this)
    on(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
    on(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
  },

  _removeEvents: function () {
    var range = this._range
    var map = this._map
    if (range) {
      off(range, getRangeEvent(range), this._updateClip, this)
      off(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
      off(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
    }
    if (map) {
      map.off('layeradd layerremove', this._updateLayers, this)
      map.off('move', this._updateClip, this)
    }
  }

Replaced with:

_addEvents: function () {
    var range = this._range;
    var map = this._map;
    if (!map || !range) return;
    map.on("move", this._updateClip, this);
    map.on("layeradd layerremove", this._updateLayers, this);
    L.DomEvent.on(range, getRangeEvent(range), this._updateClip, this);
    L.DomEvent.on(range, "touchstart", cancelMapDrag, this);
    L.DomEvent.on(range, "touchend", uncancelMapDrag, this);
    L.DomEvent.on(range, "mousedown", cancelMapDrag, this);
    L.DomEvent.on(range, "mouseup", uncancelMapDrag, this);
  },

  _removeEvents: function () {
    var range = this._range;
    var map = this._map;
    if (range) {
      L.DomEvent.off(range, getRangeEvent(range), this._updateClip, this);
      L.DomEvent.off(range, "touchstart", cancelMapDrag, this);
      L.DomEvent.off(range, "touchend", uncancelMapDrag, this);
      L.DomEvent.off(range, "mousedown", cancelMapDrag, this);
      L.DomEvent.off(range, "mouseup", uncancelMapDrag, this);
    }
    if (map) {
      map.off("layeradd layerremove", this._updateLayers, this);
      map.off("move", this._updateClip, this);
    }
  },

I got this working with React leaflet (Leaflet v.1.8.0) and I haven't tested this solution a lot. There is probably a way to get it working so that support for v.0.7 doesn't need to be removed.

Hope this helps someone. If I catch some time, I'll make a pull request or make a new fork.

Workaround works. Thanks.

[Ukonhattu]

I have updated the deprecated events mixin and this should now work with leaflet 1.8 and up. #45