digidem / leaflet-side-by-side

A Leaflet control to add a split screen to compare two map overlays
http://lab.digital-democracy.org/leaflet-side-by-side/
MIT License
344 stars 108 forks source link

Dynamically adding layers breaks clip function #27

Open mkeller3 opened 5 years ago

mkeller3 commented 5 years ago

We initialize the side by side with:

let divider = L.control.sideBySide([streets], [streets2]).addTo(map);

We then try to set the left layers with:

divider.setLeftLayers([streets, layer]);

After doing so the map looks like the following image below.

image

This is due to the clip not being reflected on all layers on the left side.

The clip is being set at this line

if (this._leftLayer) { this._leftLayer.getContainer().style.clip = clipLeft } if (this._rightLayer) { this._rightLayer.getContainer().style.clip = clipRight }

In order to fix this you can update to loop thru all of the layers.

for(let layer of this._leftLayers) { layer.getContainer().style.clip = clipLeft } for(let layer of this._rightLayers) { layer.getContainer().style.clip = clipRight }

This will fix the rendering error for the layers that are not set to _leftLayer or _rightLayer.