1

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

  • Please include your JS code in the body of question, don't give just link. – TomazicM Aug 28 at 6:07
  • @TomazicM done :) – Micmic Aug 28 at 15:23
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);

Remark: leaflet-side-by-side plugin does not work in IE11.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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