Skip to content

Add SideBySide plugin #1292

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Nov 10, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3,961 changes: 3,923 additions & 38 deletions examples/Plugins.ipynb

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions folium/plugins/__init__.py
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
from folium.plugins.scroll_zoom_toggler import ScrollZoomToggler
from folium.plugins.search import Search
from folium.plugins.semicircle import SemiCircle
from folium.plugins.side_by_side import SideBySideLayers
from folium.plugins.terminator import Terminator
from folium.plugins.time_slider_choropleth import TimeSliderChoropleth
from folium.plugins.timestamped_geo_json import TimestampedGeoJson
Expand Down Expand Up @@ -60,6 +61,7 @@
'ScrollZoomToggler',
'Search',
'SemiCircle',
'SideBySideLayers',
'StripePattern',
'TagFilterButton',
'Terminator',
Expand Down
46 changes: 46 additions & 0 deletions folium/plugins/side_by_side.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
from folium.elements import JSCSSMixin
from folium.map import Layer

from jinja2 import Template


class SideBySideLayers(JSCSSMixin, Layer):
"""
Creates a SideBySideLayers that takes two Layers and adds a sliding
control with the leaflet-side-by-side plugin.

Uses the Leaflet leaflet-side-by-side plugin https://github.com/digidem/leaflet-side-by-side

Parameters
----------
layer_left: Layer.
The left Layer within the side by side control.
Must be created and added to the map before being passed to this class.
layer_right: Layer.
The left Layer within the side by side control.
Must be created and added to the map before being passed to this class.

Examples
--------
>>> sidebyside = SideBySideLayers(layer_left, layer_right)
>>> sidebyside.add_to(m)
"""

_template = Template(u"""
{% macro script(this, kwargs) %}
var {{ this.get_name() }} = L.control.sideBySide(
{{ this.layer_left.get_name() }}, {{ this.layer_right.get_name() }}
).addTo({{ this._parent.get_name() }});
{% endmacro %}
""")

default_js = [
('leaflet.sidebyside',
'https://cdn.jsdelivr.net/gh/digidem/leaflet-side-by-side@gh-pages/leaflet-side-by-side.min.js'),
]

def __init__(self, layer_left, layer_right):
super().__init__(control=False)
self._name = 'SideBySideLayers'
self.layer_left = layer_left
self.layer_right = layer_right