Doesn't work with imageOverlay?

[snubian]

This is a fantastic plugin - I got it to work quickly with TileLayer, but not ImageOverlay. The slider appears and moves, but the image on both sides of the slider is simply whichever overlay is on top, and does not change as the slider is moved. Can this plugin be used with imageOverlay?

[gmaclennan]

Thank you! I haven't tested it with imageOverlay, if you post some example code of using it with imageOverlay and I'll take a look when I have a moment.

[snubian]

Thanks so much! Try the following JS Fiddle using ImageOverlay: http://jsfiddle.net/n2b7gumw/9/ As I mentioned, when using the same images but as TileLayers it all worked perfectly.

[gmaclennan]

Hi @snubian,

I don't have time in the short-term to get this working, but I took a look and the relevant code is here: https://github.com/digidem/leaflet-side-by-side/blob/gh-pages/index.js#L128-L133

The plugin currently assumes that the layers are tileLayers and implement the getContainer() method to get the DOM element that wraps the layer, and applies the clip style. It looks like imageOverlay layers do not implement that method, and they are not wrapped in a <div> element. You would need to apply the clip to the <img> but that is always moving, so you would need to constantly update the clip style.

It would be a little tricky to do, but not impossible, maybe somebody has the time to have a go, I would accept a Pull Request.

[snubian]

Thanks a lot for taking a look at this. I'll certainly have a play around with it, see if I can get anywhere. I appreciate your tips for where to start. Thanks again!

[Damorck]

Thanks for a great plugin. Any examples on setup with an added geometry-layer by geojson?

[gmaclennan]

Not that I'm aware of.

[gmaclennan]

Wait, I did do this, which has a geometry layer, but it shows across the whole map: https://github.com/digidem/secoya-land-invasion

[Damorck]

It´s a start. I´m still struggling with the documentaion on geojson in leaflet. So it´s also for better understanding with "working" examples :-)

[Damorck]

Hey again

Your geometrylayer (boundary) is that JSON and not GeoJSON? Your "indentation" for the coordinates seems different...

[gmaclennan]

Its geojson. Indentation doesn't matter with json/geojson.

[greenape]

You can actually use this to wipe between geojson layers, or image overlays by replacing the calls to getContainer() mentioned by @gmaclennan with getPane(), and putting the things you want to wipe between in two different panes -

map.createPane('left');
map.createPane('right');
...
img1 = L.imageOverlay("foo.png", imageBounds, {opacity:0.7, pane: "left"});
img2 = L.imageOverlay("foobar.png", imageBounds, {opacity:0.7, pane: "right"});

[snubian]

Thanks @greenape - much appreciated!

[willfarrell]

@greenape Awesome, Might be worth adding to the docs.

[weijun-lab]

@greenape amazing