Leaflet side by side plugin is not working with imageOverlay

Question

I'm trying to use the side by side plugin. I already check in the issues and change the getContainter() with getPane() in the .js file.

this._divider.style.left = dividerX + 'px'
    this.fire('dividermove', {x: dividerX})
    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.getPane().style.clip = clipLeft
    }
    if (this._rightLayer) {
      this._rightLayer.getPane().style.clip = clipRight
    }
  },

I'm using imageOverlay but i don't know where to add the map.createPane('left');map.createPane('right'); that is mentioned in the issue.

var map = L.map('map', {
    center: [23.140, -101.887],
    zoom: 5
});

var catedralVieja = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [[7.9409, -131.1589], [29.2144, -82.6558]];
L.imageOverlay(catedralVieja, imageBounds, {opacity:0.7, pane:"left"}).addTo(map);

var catedralNueva = 'https://img.vixdata.io/pd/jpg-large/es/sites/default/files/a/atlantis-ciudad-perdida.jpg',
    imageBounds = [[7.9409, -131.1589], [29.2144, -82.6558]];
L.imageOverlay(catedralNueva, imageBounds, {opacity: 0.7, pane:"right"}).addTo(map);

var hash = new L.Hash(map);

L.control.sideBySide(catedralVieja, catedralNueva).addTo(map);

This is the jsfiddle that i have and not even the divider appears :(

Answer 1

As you stated correctly, you first have to modify leaflet-side-by-side plugin by replacing every occurence of getContainter() method with getPane() method.

Then you have to create two map panes (for example named 'left' and 'right') and use them when creating image overlays.

And when adding control L.control.sideBySide to the map, you have to use image layers, not image urls as you did.

Code should look something like this:

var map = L.map('map', {
  center: [23.140, -101.887],
  zoom: 5
});

map.createPane('left');
map.createPane('right');

var catedralVieja = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
imageBounds = [[7.9409, -131.1589], [29.2144, -82.6558]];
var leftLayer = L.imageOverlay(catedralVieja, imageBounds, {pane: 'left'}).addTo(map);

var catedralNueva = 'https://img.vixdata.io/pd/jpg-large/es/sites/default/files/a/atlantis-ciudad-perdida.jpg',
imageBounds = [[7.9409, -131.1589], [29.2144, -82.6558]];
var rightLayer = L.imageOverlay(catedralNueva, imageBounds, {pane: 'right'}).addTo(map);
     

L.control.sideBySide(leftLayer, rightLayer).addTo(map);

EDIT: The above solution does not work in Leaflet v1.9. For solution see answer to this question: imageOverlay is not working with Leaflet side-by-side