Search code examples
javascriptvue.jsleaflet

Leaflet side by side always displays layers on the right

I'm working with leaflet-sbs to compare different layers.

    <l-map @ready="onMapReady">
      <l-tile-layer v-bind="tilesOpts" />
    </l-map>

The map uses one single tile layer based on https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

Then I create the sbs element and add a few GEOjson layers (GEODATAx = JSON.parse(geojson)):

const sbs = L.control.sideBySide([], []).addTo(map);
const layer1 = L.geoJSON(GEODATA1, { style: { color: 'red', weight: 2, opacity: 1 } }).addTo(map);
const layer2 = L.geoJSON(GEODATA2, { style: { color: 'green', weight: 2, opacity: 1 } }).addTo(map);
const layer3 = L.geoJSON(GEODATA3, { style: { color: 'blue', weight: 2, opacity: 1 } }).addTo(map);
const layer4 = L.geoJSON(GEODATA4, { style: { color: 'yellow', weight: 2, opacity: 1 } }).addTo(map);

Then I push the layers to a pane:

sbs.setLeftLayers([layer1, layer2]);

This works, I get my 2 layers on the left pane. I could use sbs.setRightLayers to add them to the right pane instead.

The problem is when I want to add layers on both panes:

sbs.setLeftLayers([layer1, layer2]);
sbs.setRightLayers([layer3, layer4]);

Only the layers in the right pane are displayed.

I've looked at the github issues and replaced getContainer with getPane so that the lib works with leaflet 1.9

I've tried setting the layers directly inside L.control.sideBySide method to no avail.

Solution

  • I've finally found this SE post https://gis.stackexchange.com/questions/345096/leaflet-compare-two-side-by-side-geojson-layers

    I had to create 2 panes:

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

    And then for each GEOjson assign the correct pane:

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

    Thank god for this SE post. I was going crazy.