CODEWITHSUNDEEP
leaflet
Ariel Kaputkin
Ariel Kaputkin

Reputation: 47

Dynamically select layers for Leaflet sideByside control

Using side-by-side.js I'd like to be able to select which layer group is displayed side by side. I've made an example where I have two layerGroups and I'd like to pass those into side-by-side with the control.layers selector or a jquery button so that one layer in the group goes to the left and the other goes to the right. I'm not really sure where to begin with this.

https://jsfiddle.net/kaputkid/x8r0pvg1/21/

Upvotes: 0

Views: 1052

Answers (1)

ghybs
ghybs

Reputation: 53215

Simply mention all Tile Layers that should go into the left pane as an array in 1st parameter of L.control.sideBySide() factory.

Same for all Tile Layers that should go into the right pane, they should be listed as an array and passed as 2nd parameter of the factory.

Then when these Tile Layers are added onto map (possibly through the Layers Control), Side-by-Side plugin will place them in the correct half.

L.control.sideBySide([
  Stamen_dark,
  OpenTopo_map
], [
  Stamen_watercolor,
  Esri_ocean
]).addTo(map);

Updated JSFiddle: https://jsfiddle.net/x8r0pvg1/22/

Upvotes: 2

Related Questions