Add SideBySide plugin (#1292)

* Add SideBySide plugin

* removed unused import

* SideBySideLayers plugin minor updates

* adding SideBySideLayers entry into Plugin notebook

* Update Plugins.ipynb

* update JS dependency

* Update Plugins.ipynb

* disable layer control for plugin

Co-authored-by: Lo Conti Francesco <[email protected]>
Co-authored-by: Frank <[email protected]>

Author: 3 people

examples/Plugins.ipynb

@@ -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
@@ -60,6 +61,7 @@
     'ScrollZoomToggler',
     'Search',
     'SemiCircle',
+    'SideBySideLayers',
     'StripePattern',
     'TagFilterButton',
     'Terminator',

folium/plugins/__init__.py

@@ -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