[fix] Layers not clipped on change from control layer + iOS buggy interactions #34
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Thank you again for this wonderful library! I've been using it on my website and wanted to push some fixes. Since this isn't actively maintained, I merged the two fixes into one PR to make it easier for someone to copy the code for their site.
Issue: Changing the overlay or base layer via the control layer resulted in both layers not clipping and appearing on both sides of the divider
This was caused by the new layer not being included in
this._leftLayers
orthis._rightLayers
which resulted inthis._leftLayer
orthis._rightLayer
being set tonull
but never getting set again. A null layer would be skipped in_updateClip
. I resolved it by adding event handlers tooverlayadd
andbaselayerchange
that updatethis._leftLayer
orthis._rightLayer
to the new layer and then add it tothis._leftLayers
orthis._rightLayers
respectively. This allows it to be successfully set and later clipped in_updateClip
.Issue: Leaflet side-by-side not redrawing on drag/move on iOS or requiring 2 fingers to pan or both sides of the map moving independently from the other
This was caused by two issues. iOS handles
touchend
differently from other platforms. I resolved it by adding an event listener ontouchmove
instead. This leaves the issue of drag working but only updating one layer until we trigger a redraw by moving the divider or using two fingers to zoom. Theclip
CSS property was getting set correctly, but iOS Safari/Webkit didn't trigger a redraw of the element when the style property got changed. I resolved it by forcing Safari to redraw with a crude hack (gleaned from this useful page):