Swiping between Featuregroups

[grobins]

Would it be possible to extend this to work on featuregroups? I have two featuregroups, each with a bunch of polylines representing a 'before' and 'after' map. I'd like to use the side-by-side library to swipe between these layers, but it seems this part only works on map layers

  this._leftLayer.getContainer().style.clip = clipLeft

[havardl]

Hey @grobins, did you end up finding a solution for the use case you described?

[grobins]

Unfortunately not. I just added two layers for the user to switch between.

[dhaneshawate]

Unfortunately not. I just added two layers for the user to switch between.

can show your representation because i need to implement the same or else can you please deploy your code somewhere on github or stackblitz so i can see the observing.

[phloose]

@grobins @dhanesh1795 @havardl, although some posts are really old, i would suggest you to have a look at leaflet-splitmap (which is a fork of this repo) that adds changing the clipping of the layers panes and not only their containers.

Although not directly connected to this repo i want to help all who search for this functionality, because it took me almost a whole day to figure out how i can get this to work unitl i found this simple solution...

The following refers to leaflet-splitmap NOT leaflet-side-by-side:

Like @grobins i wanted to compare two layers. Per default layers like GeoJSON are put on the overlayPane. When you simply add two layers (say two GeoJSON layers of the same featuregroup but e.g. different time) they both will be added to the overlayPane. When the divider is used leaflet-splitmap will try to change the left_-/right_layers clip css property of the containing pane according to the position of the divider (see this line). When both layers are on the same overlayPane the changes made to the left pane are immediately overwritten by setting the right pane because they refer to the same pane. To overcome this you need to put your two featuregroups in different panes. You do this by first creating the respective map panes by calling map.createPane and then set the pane property in the options of the layer you want to use with splitmap. Here you can read more about panes.

The example is taken from the leaflet-splitmap repo and slightly changed:

var map = L.map('map').setView([53, 10.5], 13);

var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap<\/a> contributors'
}).addTo(map);

map.createPane("splitmap_left")
map.createPane("splitmap_right")

var marker1 = L.circleMarker([53, 10.5], {radius: 50, pane: "splitmap_left", color: "red"}).addTo(map)
var marker2 = L.circleMarker([53, 10.5], {radius: 50, pane: "splitmap_right"}).addTo(map)

var splitMap = L.control.splitMap(marker1, marker2).addTo(map);

I hope i could help anyone who wants to use these really helpful plugins!