finishes #684 (#686)

Author: ocefpaf

examples/GulfStreamImageOverlay.ipynb

@@ -217,12 +217,6 @@ def __init__(self, location=None, width='100%', height='100%',
                 left: {{this.left[0]}}{{this.left[1]}};
                 top: {{this.top[0]}}{{this.top[1]}};
                 }
-                #{{this.get_name()}} .leaflet-image-layer {
-                    image-rendering: pixelated; /* chrome */
-                    image-rendering: -moz-crisp-edges; /* firefox */
-                    image-rendering: -o-crisp-edges; /* opera */
-                    -ms-interpolation-mode: nearest-neighbor; /* internet explorer */
-                }
             </style>
         {% endmacro %}
         {% macro html(this, kwargs) %}

folium/map.py

@@ -4,6 +4,7 @@
 
 import json
 
+from branca.element import Element, Figure
 from branca.utilities import image_to_url
 
 from folium.map import Layer
@@ -110,10 +111,11 @@ class ImageOverlay(Layer):
     """
     def __init__(self, image, bounds, opacity=1., attr=None,
                  origin='upper', colormap=None, mercator_project=False,
-                 overlay=True, control=True):
+                 overlay=True, control=True, pixelated=True):
         super(ImageOverlay, self).__init__(overlay=overlay, control=control)
         self._name = 'ImageOverlay'
         self.overlay = overlay
+        self.pixelated = pixelated
 
         if mercator_project:
             image = mercator_transform(image,
@@ -140,6 +142,26 @@ def __init__(self, image, bounds, opacity=1., attr=None,
             {% endmacro %}
             """)
 
+    def render(self, **kwargs):
+        super(ImageOverlay, self).render()
+
+        figure = self.get_root()
+        assert isinstance(figure, Figure), ('You cannot render this Element '
+                                            'if it is not in a Figure.')
+        pixelated = """<style>
+        .leaflet-image-layer {
+        image-rendering: -webkit-optimize-contrast; /* old android/safari*/
+        image-rendering: crisp-edges; /* safari */
+        image-rendering: pixelated; /* chrome */
+        image-rendering: -moz-crisp-edges; /* firefox */
+        image-rendering: -o-crisp-edges; /* opera */
+        -ms-interpolation-mode: nearest-neighbor; /* ie */
+        }
+        </style>"""
+
+        if self.pixelated:
+            figure.header.add_child(Element(pixelated), name='leaflet-image-layer')
+
     def _get_self_bounds(self):
         """
         Computes the bounds of the object itself (not including it's children)