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

setLeftLayers adds layers to the right pane #53

Open sefo opened 1 year ago

sefo commented 1 year ago

@gmaclennan

I've updated the lib so that getContainer is replaced by getPane (leaflet 1.9)

const sbs = L.control.sideBySide([], []).addTo(this.map);
const layer1 = L.geoJSON(MYGEOJSONOBJECT01, { style: { color: 'green', weight: 2, opacity: 1 } }).addTo(this.map);
const layer2 = L.geoJSON(MYGEOJSONOBJECT02, { style: { color: 'red', weight: 2, opacity: 1 } }).addTo(this.map);
sbs.setLeftLayers(layer1);
sbs.setRightLayers(layer2);

Both layers are on the right pane...

I've tried setting them up directly in the sideBySide() function for the same result.

EDIT: setxxxLayers individually work, but not both at the same time. So I either get left pane working with blank right pane or the other way around.

sefo commented 1 year ago

It's not documented anywhere but I had to create 2 panes on the map:

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

Then assign my geojson data to either one:

const layer = L.geoJSON(map, { style: { color, weight: 2, opacity: 1 }, pane: 'left' }).addTo(this.map);