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

Doesn't support the same layer on both left and right. #48

Open oisact opened 1 year ago

oisact commented 1 year ago

My UI allows the user to select which layers they want on the left and right for comparison. This can result in the user selecting the same layer for both sides, even if just temporarily while they are making selections. The side-by-side control does not support this correctly, and typically the left side will be blanked (because there is just one layer, and the right side clip is set last, so it "wins").

The following simple fix removes the clip area from the layer if the left and right layers are the same.

_updateClip: function () {
    var map = this._map
    var nw = map.containerPointToLayerPoint([0, 0])
    var se = map.containerPointToLayerPoint(map.getSize())
    var clipX = nw.x + this.getPosition()
    var dividerX = this.getPosition()

    this._divider.style.left = dividerX + 'px'
    this.fire('dividermove', {x: dividerX})
    if (this._leftLayer === this._rightLayer && this._leftLayer) {
      this._leftLayer.getContainer().style.clip = '';
      this._rightLayer.getContainer().style.clip = '';
    } else {
      var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)'
      var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)'
      if (this._leftLayer) {
        this._leftLayer.getContainer().style.clip = clipLeft
      }
      if (this._rightLayer) {
        this._rightLayer.getContainer().style.clip = clipRight
      }
    }
  },