add side by side control support to dash leaflet

[hamidreza-pyn]

#258 a simple SideBySideControl (https://github.com/digidem/leaflet-side-by-side) support added to dash leaflet.

[pip-install-python]

This is awesome, attempted setting this up prior to checking the pull requests. Will pull this and check it out. Awesome contribution!

[pip-install-python]

Worked like a charm!:

added a side_by_side_control.py test intests/components:

from dash_leaflet import SideBySideControl, TileLayer
from tests.stubs import app_stub

# Create basic test app with two tile layers to compare
left_layer_url = "https://tile.openstreetmap.org/{z}/{x}/{y}.png"
right_layer_url = "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"

# Create both tile layers explicitly
left_layer = TileLayer(url=left_layer_url)
right_layer = TileLayer(url=right_layer_url)

# Create the control component with the tile layer URLs
control = SideBySideControl(leftLayer=left_layer_url, rightLayer=right_layer_url)

# Include both tile layers and the control in the components list
app = app_stub(components=[left_layer, right_layer, control])

if __name__ == "__main__":
    app.run_server(port=9997)

[emilhe]

I like the concept of this PR, but I am but worried that the scope may be too limited (two tile layers). What if we want to compare two GeoJSON layers? Or a tile layer and a WSM layer? Or add multiple tile layers on one side... I am wondering if we could come up with a (more generic) solution that would enable these use cases also.

EDIT: Maybe something like assigning an ID to the layer(s), and then passing a list of IDs to the left/right controls? An altertertive approach would be to add some kind of wrapping logic similar to the LayersControl

[pip-install-python]

https://dash.geomapindex.com/assets/applications/1742225314066.gif
This is another approach i was able to come up with in order to show two tile layers at the same time.

Basically, a flash light button, when clicked, allows your mouse to be a flash light to show the second layer.

When I was working on this, it was limited to a wrapper control type of solution and didn't effect the other elements on the map was solely focused on the tile layer.

[camillelaine]

Hi,

Thank you for this PR and for reviewing it !

I’m very interested in the SideBySide component, but I would indeed need the ability to use dl.GeoJSON layers on each side, not just dl.TileLayer.
It would be fantastic if you had the chance to work on supporting this.