Popup update ; with examples

Author: Martin Journois

examples/Popups.ipynb

@@ -210,20 +210,20 @@ def __init__(self, width="100%", height=None, ratio="60%", figsize=None):
 
         Parameters
         ----------
-            width : str, default "100%"
-                The width of the Figure.
-                It may be a percentage or pixel value (like "300px").
-            height : str, default None
-                The height of the Figure.
-                It may be a percentage or a pixel value (like "300px").
-            ratio : str, default "60%"
-                A percentage defining the aspect ratio of the Figure.
-                It will be ignored if height is not None.
-            figsize : tuple of two int, default None
-                If you're a matplotlib addict, you can overwrite width and
-                height. Values will be converted into pixels in using 60 dpi.
-                For example figsize=(10, 5) will result in
-                width="600px", height="300px".
+        width : str, default "100%"
+            The width of the Figure.
+            It may be a percentage or pixel value (like "300px").
+        height : str, default None
+            The height of the Figure.
+            It may be a percentage or a pixel value (like "300px").
+        ratio : str, default "60%"
+            A percentage defining the aspect ratio of the Figure.
+            It will be ignored if height is not None.
+        figsize : tuple of two int, default None
+            If you're a matplotlib addict, you can overwrite width and
+            height. Values will be converted into pixels in using 60 dpi.
+            For example figsize=(10, 5) will result in
+            width="600px", height="300px".
         """
         super(Figure, self).__init__()
         self._name = 'Figure'
@@ -295,6 +295,9 @@ def to_dict(self, depth=-1, **kwargs):
         out['script'] = self.script.to_dict(depth=depth-1, **kwargs)
         return out
 
+    def get_root(self):
+        return self
+
     def render(self, **kwargs):
         """TODO : docstring here."""
         for name, child in self._children.items():
@@ -451,6 +454,69 @@ def _repr_html_(self, **kwargs):
             out = self._parent._repr_html_(**kwargs)
         return out
 
+class IFrame(Element):
+    def __init__(self, html=None, width="100%", height=None, ratio="60%", figsize=None):
+        """Create a Figure object, to plot things into it.
+
+        Parameters
+        ----------
+        html : str, default None
+            Eventual HTML code that you want to put in the frame.
+        width : str, default "100%"
+            The width of the Figure.
+            It may be a percentage or pixel value (like "300px").
+        height : str, default None
+            The height of the Figure.
+            It may be a percentage or a pixel value (like "300px").
+        ratio : str, default "60%"
+            A percentage defining the aspect ratio of the Figure.
+            It will be ignored if height is not None.
+        figsize : tuple of two int, default None
+            If you're a matplotlib addict, you can overwrite width and
+            height. Values will be converted into pixels in using 60 dpi.
+            For example figsize=(10, 5) will result in
+            width="600px", height="300px".
+        """
+        super(IFrame, self).__init__()
+        self._name = 'IFrame'
+
+        self.width = width
+        self.height = height
+        self.ratio = ratio
+        if figsize is not None:
+            self.width = str(60*figsize[0])+'px'
+            self.height = str(60*figsize[1])+'px'
+
+        if isinstance(html, text_type) or isinstance(html, binary_type):
+            self.add_children(Element(html))
+        elif html is not None:
+            self.add_children(html)
+
+    def render(self, **kwargs):
+        """Displays the Figure in a Jupyter notebook.
+
+        Parameters
+        ----------
+
+        """
+        html = super(IFrame,self).render(**kwargs)
+        html = "data:text/html;base64," + base64.b64encode(html.encode('utf8')).decode('utf8')  # noqa
+
+        if self.height is None:
+            iframe = (
+            '<div style="width:{width};">'
+            '<div style="position:relative;width:100%;height:0;padding-bottom:{ratio};">'
+            '<iframe src="{html}" style="position:absolute;width:100%;height:100%;left:0;top:0;">'
+            '</iframe>'
+            '</div></div>').format  # noqa
+            iframe = iframe(html=html,
+                            width=self.width,
+                            ratio=self.ratio)
+        else:
+            iframe = ('<iframe src="{html}" width="{width}" '
+                      'height="{height}"></iframe>').format
+            iframe = iframe(html=html, width=self.width, height=self.height)
+        return iframe
 
 class MacroElement(Element):
     """This is a parent class for Elements defined by a macro template.

folium/element.py

@@ -131,19 +131,21 @@ def render(self, **kwargs):
 
 
 class Vega(Element):
-    def __init__(self, data, width='100%', height='100%',
+    def __init__(self, data, width=None, height=None,
                  left="0%", top="0%", position='relative'):
         """
         TODO docstring here
 
         """
         super(Vega, self).__init__()
         self._name = 'Vega'
-        self.data = data
+        self.data = data.to_json() if hasattr(data,'to_json') else data
+        if isinstance(self.data,text_type) or isinstance(data,binary_type):
+            self.data = json.loads(self.data)
 
         # Size Parameters.
-        self.width = _parse_size(width)
-        self.height = _parse_size(height)
+        self.width = _parse_size(self.data.get('width','100%') if width is None else width)
+        self.height = _parse_size(self.data.get('height','100%') if height is None else height)
         self.left = _parse_size(left)
         self.top = _parse_size(top)
         self.position = position
@@ -250,8 +252,8 @@ def __init__(self, data, style_function=None):
             {% macro script(this, kwargs) %}
                 var {{this.get_name()}} = L.geoJson(
                     {% if this.embed %}{{this.style_data()}}{% else %}"{{this.data}}"{% endif %})
-                    .addTo({{this._parent.get_name()}})
-                    .setStyle(function(feature) {return feature.properties.style;});
+                    .addTo({{this._parent.get_name()}});
+                {{this.get_name()}}.setStyle(function(feature) {return feature.properties.style;});
             {% endmacro %}
             """)  # noqa
 

folium/features.py

@@ -114,9 +114,12 @@ def simple_marker(self, location=None, popup=None,
         if isinstance(popup, text_type) or isinstance(popup, binary_type):
             popup_ = Popup(popup, max_width=popup_width)
         elif isinstance(popup, tuple):
-            popup_ = Popup(Vega(json.loads(popup[0].to_json()),
-                                width="100%", height="100%"),
-                           max_width=popup_width)
+            popup_ = Popup(max_width=popup_width)
+            Vega(
+                json.loads(popup[0].to_json()),
+                width="100%",
+                height="100%",
+                ).add_to(popup_)
         else:
             popup_ = None
         marker = Marker(location,

folium/folium.py

@@ -402,7 +402,7 @@ def __init__(self, location, popup=None, icon=None):
 
 
 class Popup(Element):
-    def __init__(self, html, max_width=300):
+    def __init__(self, html=None, max_width=300):
         super(Popup, self).__init__()
         self._name = 'Popup'
         self.header = Element()
@@ -414,7 +414,7 @@ def __init__(self, html, max_width=300):
         self.script._parent = self
 
         if isinstance(html, Element):
-            self.add_children(html)
+            self.html.add_children(html)
         elif isinstance(html, text_type) or isinstance(html, binary_type):
             self.html.add_children(Html(text_type(html)))
 

folium/map.py

@@ -358,8 +358,8 @@ def test_geo_json_str(self):
         # Verify the geo_json object
         obj_temp = jinja2.Template("""
             var {{ this.get_name() }} = L.geoJson({{ json.dumps(this.data) }})
-                .addTo({{ this._parent.get_name() }})
-                .setStyle(function(feature) {return feature.properties.style;});
+                .addTo({{ this._parent.get_name() }});
+            {{ this.get_name() }}.setStyle(function(feature) {return feature.properties.style;});
                 """)
         obj = obj_temp.render(this=geo_json, json=json)
         assert ''.join(obj.split())[:-1] in out