2

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 :(

2
  • Please include your JS code in the body of question, don't give just link.
    – TomazicM
    Aug 28, 2019 at 6:07
  • @TomazicM done :)
    – Micmic
    Aug 28, 2019 at 15:23

1 Answer 1

3

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

1
  • Great solution - Thanks!
    – jwolf
    Nov 9, 2021 at 18:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.