Merge pull request #1416 from Conengmo/js-css-in-class

Author: ocefpaf

folium/elements.py

@@ -0,0 +1,21 @@
+from branca.element import Figure, Element, JavascriptLink, CssLink
+
+
+class JSCSSMixin(Element):
+    """Render links to external Javascript and CSS resources."""
+
+    default_js = []
+    default_css = []
+
+    def render(self, **kwargs):
+        figure = self.get_root()
+        assert isinstance(figure, Figure), ('You cannot render this Element '
+                                            'if it is not in a Figure.')
+
+        for name, url in self.default_js:
+            figure.header.add_child(JavascriptLink(url), name=name)
+
+        for name, url in self.default_css:
+            figure.header.add_child(CssLink(url), name=name)
+
+        super().render(**kwargs)

folium/features.py

@@ -14,6 +14,7 @@
 from branca.element import (Element, Figure, JavascriptLink, MacroElement)
 from branca.utilities import color_brewer
 
+from folium.elements import JSCSSMixin
 from folium.folium import Map
 from folium.map import (FeatureGroup, Icon, Layer, Marker, Tooltip)
 from folium.utilities import (
@@ -36,7 +37,7 @@
 import requests
 
 
-class RegularPolygonMarker(Marker):
+class RegularPolygonMarker(JSCSSMixin, Marker):
     """
     Custom markers using the Leaflet Data Vis Framework.
 
@@ -69,6 +70,11 @@ class RegularPolygonMarker(Marker):
         {% endmacro %}
         """)
 
+    default_js = [
+        ('dvf_js',
+         'https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.0/leaflet-dvf.markers.min.js'),
+    ]
+
     def __init__(self, location, number_of_sides=4, rotation=0, radius=15,
                  popup=None, tooltip=None, **kwargs):
         super(RegularPolygonMarker, self).__init__(
@@ -83,21 +89,8 @@ def __init__(self, location, number_of_sides=4, rotation=0, radius=15,
             radius=radius,
         ))
 
-    def render(self, **kwargs):
-        """Renders the HTML representation of the element."""
-        super(RegularPolygonMarker, self).render()
-
-        figure = self.get_root()
-        assert isinstance(figure, Figure), ('You cannot render this Element '
-                                            'if it is not in a Figure.')
-
-        figure.header.add_child(
-            JavascriptLink('https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.0/leaflet-dvf.markers.min.js'),
-            # noqa
-            name='dvf_js')
 
-
-class Vega(Element):
+class Vega(JSCSSMixin, Element):
     """
     Creates a Vega chart element.
 
@@ -128,6 +121,15 @@ class Vega(Element):
     """
     _template = Template(u'')
 
+    default_js = [
+        ('d3',
+         'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'),
+        ('vega',
+         'https://cdnjs.cloudflare.com/ajax/libs/vega/1.4.3/vega.min.js'),
+        ('jquery',
+         'https://code.jquery.com/jquery-2.1.0.min.js'),
+    ]
+
     def __init__(self, data, width=None, height=None,
                  left='0%', top='0%', position='relative'):
         super(Vega, self).__init__()
@@ -147,6 +149,8 @@ def __init__(self, data, width=None, height=None,
 
     def render(self, **kwargs):
         """Renders the HTML representation of the element."""
+        super().render(**kwargs)
+
         self.json = json.dumps(self.data)
 
         self._parent.html.add_child(Element(Template("""
@@ -171,18 +175,6 @@ def render(self, **kwargs):
             </style>
             """).render(this=self, **kwargs)), name=self.get_name())
 
-        figure.header.add_child(
-            JavascriptLink('https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'),  # noqa
-            name='d3')
-
-        figure.header.add_child(
-            JavascriptLink('https://cdnjs.cloudflare.com/ajax/libs/vega/1.4.3/vega.min.js'),  # noqa
-            name='vega')
-
-        figure.header.add_child(
-            JavascriptLink('https://code.jquery.com/jquery-2.1.0.min.js'),
-            name='jquery')
-
         figure.script.add_child(
             Template("""function vega_parse(spec, div) {
             vg.parse.spec(spec, function(chart) { chart({el:div}).update(); });}"""),  # noqa
@@ -649,7 +641,7 @@ def _set_default_key(mapping):
         del (mapping[key_longest])
 
 
-class TopoJson(Layer):
+class TopoJson(JSCSSMixin, Layer):
     """
     Creates a TopoJson object for plotting into a Map.
 
@@ -721,6 +713,11 @@ class TopoJson(Layer):
         {% endmacro %}
         """)  # noqa
 
+    default_js = [
+        ('topojson',
+         'https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js'),
+    ]
+
     def __init__(self, data, object_path, style_function=None,
                  name=None, overlay=True, control=True, show=True,
                  smooth_factor=None, tooltip=None):
@@ -770,14 +767,6 @@ def render(self, **kwargs):
         self.style_data()
         super(TopoJson, self).render(**kwargs)
 
-        figure = self.get_root()
-        assert isinstance(figure, Figure), ('You cannot render this Element '
-                                            'if it is not in a Figure.')
-
-        figure.header.add_child(
-            JavascriptLink('https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js'),  # noqa
-            name='topojson')
-
     def get_bounds(self):
         """
         Computes the bounds of the object itself (not including it's children)

folium/folium.py

@@ -8,8 +8,9 @@
 import time
 import warnings
 
-from branca.element import CssLink, Element, Figure, JavascriptLink, MacroElement
+from branca.element import Element, Figure, MacroElement
 
+from folium.elements import JSCSSMixin
 from folium.map import FitBounds
 from folium.raster_layers import TileLayer
 from folium.utilities import (
@@ -67,7 +68,7 @@ def __init__(self, no_touch=False, disable_3d=False):
         self.disable_3d = disable_3d
 
 
-class Map(MacroElement):
+class Map(JSCSSMixin, MacroElement):
     """Create a Map with Folium and Leaflet.js
 
     Generate a base map of given width and height with either default
@@ -208,6 +209,10 @@ class Map(MacroElement):
         {% endmacro %}
         """)
 
+    # use the module variables for backwards compatibility
+    default_js = _default_js
+    default_css = _default_css
+
     def __init__(
             self,
             location=None,
@@ -341,14 +346,6 @@ def render(self, **kwargs):
         # Set global switches
         figure.header.add_child(self.global_switches, name='global_switches')
 
-        # Import Javascripts
-        for name, url in _default_js:
-            figure.header.add_child(JavascriptLink(url), name=name)
-
-        # Import Css
-        for name, url in _default_css:
-            figure.header.add_child(CssLink(url), name=name)
-
         figure.header.add_child(Element(
             '<style>html, body {'
             'width: 100%;'

folium/plugins/antpath.py

@@ -1,18 +1,12 @@
 # -*- coding: utf-8 -*-
 
-from branca.element import Figure, JavascriptLink
-
+from folium.elements import JSCSSMixin
 from folium.vector_layers import path_options, BaseMultiLocation
 
 from jinja2 import Template
 
-_default_js = [
-    ('antpath',
-     'https://cdn.jsdelivr.net/npm/leaflet-ant-path@1.1.2/dist/leaflet-ant-path.min.js')
-]
-
 
-class AntPath(BaseMultiLocation):
+class AntPath(JSCSSMixin, BaseMultiLocation):
     """
     Class for drawing AntPath polyline overlays on a map.
 
@@ -42,6 +36,11 @@ class AntPath(BaseMultiLocation):
         {% endmacro %}
         """)
 
+    default_js = [
+        ('antpath',
+         'https://cdn.jsdelivr.net/npm/leaflet-ant-path@1.1.2/dist/leaflet-ant-path.min.js')
+    ]
+
     def __init__(self, locations, popup=None, tooltip=None, **kwargs):
         super(AntPath, self).__init__(
             locations,
@@ -63,14 +62,3 @@ def __init__(self, locations, popup=None, tooltip=None, **kwargs):
             'color': kwargs.pop('color', '#0000FF'),
             'pulseColor': kwargs.pop('pulse_color', '#FFFFFF'),
         })
-
-    def render(self, **kwargs):
-        super(AntPath, self).render()
-
-        figure = self.get_root()
-        assert isinstance(figure, Figure), ('You cannot render this Element '
-                                            'if it is not in a Figure.')
-
-        # Import Javascripts
-        for name, url in _default_js:
-            figure.header.add_child(JavascriptLink(url), name=name)

folium/plugins/beautify_icon.py

@@ -1,23 +1,14 @@
 # -*- coding: utf-8 -*-
 
-from branca.element import CssLink, Figure, JavascriptLink, MacroElement
+from branca.element import MacroElement
 
+from folium.elements import JSCSSMixin
 from folium.utilities import parse_options
 
 from jinja2 import Template
 
-_default_js = [
-    ('beautify_icon_js',
-     'https://cdn.jsdelivr.net/gh/marslan390/BeautifyMarker/leaflet-beautify-marker-icon.min.js')
-    ]
-
-_default_css = [
-    ('beautify_icon_css',
-     'https://cdn.jsdelivr.net/gh/marslan390/BeautifyMarker/leaflet-beautify-marker-icon.min.css')
-    ]
 
-
-class BeautifyIcon(MacroElement):
+class BeautifyIcon(JSCSSMixin, MacroElement):
     """
     Create a BeautifyIcon that can be added to a Marker
 
@@ -65,6 +56,15 @@ class BeautifyIcon(MacroElement):
     ICON_SHAPE_TYPES = ['circle', 'circle-dot', 'doughnut', 'rectangle-dot',
                         'marker', None]
 
+    default_js = [
+        ('beautify_icon_js',
+         'https://cdn.jsdelivr.net/gh/marslan390/BeautifyMarker/leaflet-beautify-marker-icon.min.js')
+    ]
+    default_css = [
+        ('beautify_icon_css',
+         'https://cdn.jsdelivr.net/gh/marslan390/BeautifyMarker/leaflet-beautify-marker-icon.min.css')
+    ]
+
     def __init__(self, icon=None, icon_shape=None, border_width=3,
                  border_color='#000', text_color='#000',
                  background_color='#FFF', inner_icon_style='', spin=False,
@@ -85,18 +85,3 @@ def __init__(self, icon=None, icon_shape=None, border_width=3,
             text=number,
             **kwargs
         )
-
-    def render(self, **kwargs):
-        super(BeautifyIcon, self).render(**kwargs)
-
-        figure = self.get_root()
-        assert isinstance(figure, Figure), ('You cannot render this Element '
-                                            'if it is not in a Figure.')
-
-        # Import Javascripts
-        for name, url in _default_js:
-            figure.header.add_child(JavascriptLink(url), name=name)
-
-        # Import Css
-        for name, url in _default_css:
-            figure.header.add_child(CssLink(url), name=name)

folium/plugins/boat_marker.py

@@ -1,19 +1,13 @@
 # -*- coding: utf-8 -*-
 
-from branca.element import Figure, JavascriptLink
-
+from folium.elements import JSCSSMixin
 from folium.map import Marker
 from folium.utilities import parse_options
 
 from jinja2 import Template
 
-_default_js = [
-    ('markerclusterjs',
-     'https://unpkg.com/leaflet.boatmarker/leaflet.boatmarker.min.js'),
-    ]
-
 
-class BoatMarker(Marker):
+class BoatMarker(JSCSSMixin, Marker):
     """Add a Marker in the shape of a boat.
 
     Parameters
@@ -50,6 +44,11 @@ class BoatMarker(Marker):
         {% endmacro %}
         """)
 
+    default_js = [
+        ('markerclusterjs',
+         'https://unpkg.com/leaflet.boatmarker/leaflet.boatmarker.min.js'),
+    ]
+
     def __init__(self, location, popup=None, icon=None,
                  heading=0, wind_heading=None, wind_speed=0, **kwargs):
         super(BoatMarker, self).__init__(
@@ -62,14 +61,3 @@ def __init__(self, location, popup=None, icon=None,
         self.wind_heading = wind_heading
         self.wind_speed = wind_speed
         self.options = parse_options(**kwargs)
-
-    def render(self, **kwargs):
-        super(BoatMarker, self).render(**kwargs)
-
-        figure = self.get_root()
-        assert isinstance(figure, Figure), ('You cannot render this Element '
-                                            'if it is not in a Figure.')
-
-        # Import Javascripts
-        for name, url in _default_js:
-            figure.header.add_child(JavascriptLink(url), name=name)