Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[fix] Layers not clipped on change from control layer + iOS buggy interactions #34

Open
wants to merge 4 commits into
base: gh-pages
Choose a base branch
from

Conversation

AHAAAAAAA
Copy link

@AHAAAAAAA AHAAAAAAA commented Jan 12, 2021

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 or this._rightLayers which resulted in this._leftLayer or this._rightLayer being set to null but never getting set again. A null layer would be skipped in _updateClip. I resolved it by adding event handlers to overlayadd and baselayerchange that update this._leftLayer or this._rightLayer to the new layer and then add it to this._leftLayers or this._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 on touchmove 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. The clip 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):

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display=''

…control layer. Resolve iOS safari not redrawing on drag/move by forcing it to redraw with the updated style changes

Cleanup
@AHAAAAAAA AHAAAAAAA changed the title [maintenance] Layers not clipped when changed from control layer + iOS Safari not interactive or redrawing [maintenance] Layers not clipped when changed from control layer + iOS buggy interactions and not redrawing Jan 12, 2021
@AHAAAAAAA AHAAAAAAA changed the title [maintenance] Layers not clipped when changed from control layer + iOS buggy interactions and not redrawing [fix] Layers not clipped via control layer updates+ iOS buggy interactions/not redrawing Jan 12, 2021
@AHAAAAAAA AHAAAAAAA changed the title [fix] Layers not clipped via control layer updates+ iOS buggy interactions/not redrawing [fix] Layers not clipped on change from control layer + iOS buggy interactions Jan 12, 2021
@sefo
Copy link

sefo commented Jul 6, 2023

Tried this. It breaks the range events and no layer is visible. Using Chrome, leaflet 1.9.4 (I did replace getContainer with getPane)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants