python-visualization/folium

SideBySideLayers plugin not working

giswqs opened this issue · 7 comments

Describe the bug
The SideBySideLayers plugin for folium v0.14.0 is not working properly. The slider can't be moved.

@Conengmo @fralc

To Reproduce

https://colab.research.google.com/github/python-visualization/folium/blob/main/examples/Plugins.ipynb

```bash
!pip install -U folium
import folium
from folium import plugins

m = folium.Map(location=(30, 20), zoom_start=4)

layer_right = folium.TileLayer('openstreetmap')
layer_left = folium.TileLayer('cartodbpositron')

sbs = plugins.SideBySideLayers(layer_left=layer_left, layer_right=layer_right)

layer_left.add_to(m)
layer_right.add_to(m)
sbs.add_to(m)

m

Peek 2023-02-18 14-43

It should work like this:

https://ipyleaflet.readthedocs.io/en/latest/controls/split_map_control.html
Peek 2023-02-18 14-45

Hi @giswqs I was able to fix the issue by pinning to an older version of the minified js. Can you verify if this fixes your problem as well?

import folium
from folium import plugins

class FixedSideBySideLayers(plugins.SideBySideLayers):
    default_js = [
        (
            "leaflet.sidebyside",
            "https://cdn.jsdelivr.net/gh/digidem/leaflet-side-by-side@2.0.0/leaflet-side-by-side.min.js",
        ),
    ]
   


m = folium.Map(location=(30, 20), zoom_start=4)

layer_right = folium.TileLayer('openstreetmap')
layer_left = folium.TileLayer('cartodbpositron')

sbs = FixedSideBySideLayers(layer_left=layer_left, layer_right=layer_right)

layer_left.add_to(m)
layer_right.add_to(m)
sbs.add_to(m)

m

@jtmiclat Yes, it works.

Thanks for checking it! I opened a PR #1732 to merge the fix.

Since #1732 was merged we can close this issue.

Thanks for posting the issue and for the fix. I ran into the same thing with v0.14.0 - any plans to cut a new release tag with this fix?

Hi Matt, valid question. I was planning to do a v1.0 release when the documentation was updated, which we merged this week, so we should get working on that release!

Cool, congrats on the milestone!