Dragging the map

[lesley-w]

When the side by side control is first loaded it is possible to drag the map, however, once the slider has been moved you can no longer drag the map.

[gmaclennan]

hi @lesley-w does the live example work for you? If it works, it's probably an issue with your code.

[lesley-w]

On chrome version 59.0.3071.115 (Official Build) (64-bit), I can drag the map, but the slider doesn't move

[gmaclennan]

Strange I am on the same build of Chrome on Mac OSX and I can drag the map and move the slider in the live example with no problems.

[lesley-w]

I'm on Windows 10

[gmaclennan]

I did manage to replicate one bug though: if I drag the slider quickly before the page has finished loading then I can no longer drag the map. Some strange here... I won't have time to investigate much further, but maybe someone else can pick this up if they find the same bug.

[lesley-w]

I've found out what is causing the problem. The cancelMapDrag function is being called twice, which means mapWasDragEnabled is set to true the first time, then map.dragging is disabled, which means the second time cancelMapDrag is called mapWasDragEnabled is being set to false. I think the function is being called twice because I have a touch-enabled laptop, so even though I am using the mouse to move the slider, I suspect both the mousedown event and touchstate events are being called and so cancelMapDrag is being called once for the mousedown event and then again for touchstart.

[lesley-w]

I've managed to fix the issue by adding a dragCancelled flag to the cancelMapDrag/uncancelMapDrag functions.

var dragCancelled = false;

function cancelMapDrag() { if (!dragCancelled) { mapWasDragEnabled = this._map.dragging.enabled() mapWasTapEnabled = this._map.tap && this._map.tap.enabled() this._map.dragging.disable() this._map.tap && this._map.tap.disable()
}

dragCancelled = true; }

function uncancelMapDrag (e) { this._refocusOnMap(e) if (mapWasDragEnabled) { this._map.dragging.enable() } if (mapWasTapEnabled) { this._map.tap.enable() }

dragCancelled = false; }

[Charmatzis]

I have the same problem.... In development stage it works sometimes, in production doesn't work at all....

[Charmatzis]

I investigate a little bit more and I believe that the error comes from https://github.com/digidem/leaflet-side-by-side/blob/gh-pages/leaflet-side-by-side.js#L179

where you need to write something like that

on(range, 'mousedown', cancelMapDrag, this)
on(range, 'mouseup', uncancelMapDrag, this)
on(range,  'touchstart' , cancelMapDrag, this)
on(range, 'touchend', uncancelMapDrag, this)

same and on the removeEvents method.