Merge pull request #537 from juoceano/float_image

Add a float image plugin

Author: ocefpaf

examples/FloatImage.ipynb

@@ -0,0 +1,82 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {
+    "collapsed": false
+   },
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "0.3.0.dev\n"
+     ]
+    }
+   ],
+   "source": [
+    "import os\n",
+    "import folium\n",
+    "\n",
+    "print(folium.__version__)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {
+    "collapsed": false
+   },
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<div style=\"width:100%;\"><div style=\"position:relative;width:100%;height:0;padding-bottom:60%;\"><iframe src=\"data:text/html;base64,PCFET0NUWVBFIGh0bWw+CjxoZWFkPiAgICAKICAgIDxtZXRhIGh0dHAtZXF1aXY9ImNvbnRlbnQtdHlwZSIgY29udGVudD0idGV4dC9odG1sOyBjaGFyc2V0PVVURi04IiAvPgogICAgPHNjcmlwdD5MX1BSRUZFUl9DQU5WQVMgPSBmYWxzZTsgTF9OT19UT1VDSCA9IGZhbHNlOyBMX0RJU0FCTEVfM0QgPSBmYWxzZTs8L3NjcmlwdD4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL3VucGtnLmNvbS9sZWFmbGV0QDEuMC4xL2Rpc3QvbGVhZmxldC5qcyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgvbGlicy9qcXVlcnkvMS4xMS4xL2pxdWVyeS5taW4uanMiPjwvc2NyaXB0PgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vbWF4Y2RuLmJvb3RzdHJhcGNkbi5jb20vYm9vdHN0cmFwLzMuMi4wL2pzL2Jvb3RzdHJhcC5taW4uanMiPjwvc2NyaXB0PgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuanMuY2xvdWRmbGFyZS5jb20vYWpheC9saWJzL0xlYWZsZXQuYXdlc29tZS1tYXJrZXJzLzIuMC4yL2xlYWZsZXQuYXdlc29tZS1tYXJrZXJzLmpzIj48L3NjcmlwdD4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2NkbmpzLmNsb3VkZmxhcmUuY29tL2FqYXgvbGlicy9sZWFmbGV0Lm1hcmtlcmNsdXN0ZXIvMS4wLjAvbGVhZmxldC5tYXJrZXJjbHVzdGVyLXNyYy5qcyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvbGVhZmxldC5tYXJrZXJjbHVzdGVyLzEuMC4wL2xlYWZsZXQubWFya2VyY2x1c3Rlci5qcyI+PC9zY3JpcHQ+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9Imh0dHBzOi8vdW5wa2cuY29tL2xlYWZsZXRAMS4wLjEvZGlzdC9sZWFmbGV0LmNzcyIgLz4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4yLjAvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIiAvPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJodHRwczovL21heGNkbi5ib290c3RyYXBjZG4uY29tL2Jvb3RzdHJhcC8zLjIuMC9jc3MvYm9vdHN0cmFwLXRoZW1lLm1pbi5jc3MiIC8+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9Imh0dHBzOi8vbWF4Y2RuLmJvb3RzdHJhcGNkbi5jb20vZm9udC1hd2Vzb21lLzQuNi4zL2Nzcy9mb250LWF3ZXNvbWUubWluLmNzcyIgLz4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvTGVhZmxldC5hd2Vzb21lLW1hcmtlcnMvMi4wLjIvbGVhZmxldC5hd2Vzb21lLW1hcmtlcnMuY3NzIiAvPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJodHRwczovL2NkbmpzLmNsb3VkZmxhcmUuY29tL2FqYXgvbGlicy9sZWFmbGV0Lm1hcmtlcmNsdXN0ZXIvMS4wLjAvTWFya2VyQ2x1c3Rlci5EZWZhdWx0LmNzcyIgLz4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvbGVhZmxldC5tYXJrZXJjbHVzdGVyLzEuMC4wL01hcmtlckNsdXN0ZXIuY3NzIiAvPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJodHRwczovL3Jhd2dpdC5jb20vcHl0aG9uLXZpc3VhbGl6YXRpb24vZm9saXVtL21hc3Rlci9mb2xpdW0vdGVtcGxhdGVzL2xlYWZsZXQuYXdlc29tZS5yb3RhdGUuY3NzIiAvPgogICAgPHN0eWxlPmh0bWwsIGJvZHkge3dpZHRoOiAxMDAlO2hlaWdodDogMTAwJTttYXJnaW46IDA7cGFkZGluZzogMDt9PC9zdHlsZT4KICAgIDxzdHlsZT4jbWFwIHtwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDtib3R0b206MDtyaWdodDowO2xlZnQ6MDt9PC9zdHlsZT4KICAgIAogICAgICAgICAgICA8c3R5bGU+ICNtYXBfMGRmMDU5YmVlMDQyNDRhNWE1MmJmYjY3NTgxYzI3ZDkgewogICAgICAgICAgICAgICAgcG9zaXRpb24gOiByZWxhdGl2ZTsKICAgICAgICAgICAgICAgIHdpZHRoIDogMTAwLjAlOwogICAgICAgICAgICAgICAgaGVpZ2h0OiAxMDAuMCU7CiAgICAgICAgICAgICAgICBsZWZ0OiAwLjAlOwogICAgICAgICAgICAgICAgdG9wOiAwLjAlOwogICAgICAgICAgICAgICAgfQogICAgICAgICAgICA8L3N0eWxlPgogICAgICAgIAogICAgCiAgICAgICAgICAgICAgICA8c3R5bGU+CiAgICAgICAgICAgICAgICAgICAgI2Zsb2F0X2ltYWdlX2Y4MTc3ZGM4MWFjYjQ2M2ViZjEwOThiMWRjZmVlZjFiIHsKICAgICAgICAgICAgICAgICAgICAgICAgcG9zaXRpb246YWJzb2x1dGU7CiAgICAgICAgICAgICAgICAgICAgICAgIGJvdHRvbTo2MCU7CiAgICAgICAgICAgICAgICAgICAgICAgIGxlZnQ6NzAlOwogICAgICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICA8L3N0eWxlPgogICAgICAgICAgICAKPC9oZWFkPgo8Ym9keT4gICAgCiAgICAKICAgICAgICAgICAgPGRpdiBjbGFzcz0iZm9saXVtLW1hcCIgaWQ9Im1hcF8wZGYwNTliZWUwNDI0NGE1YTUyYmZiNjc1ODFjMjdkOSIgPjwvZGl2PgogICAgICAgIAogICAgCiAgICAgICAgICAgIDxpbWcgaWQ9ImZsb2F0X2ltYWdlX2Y4MTc3ZGM4MWFjYjQ2M2ViZjEwOThiMWRjZmVlZjFiIiBhbHQ9ImZsb2F0X2ltYWdlIgogICAgICAgICAgICAgICAgIHNyYz0iaHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL1NFQ09PUkEvc3RhdGljX2Fzc2V0cy9tYXN0ZXIvbWFwcy9pbWcvcm9zZS5wbmciCiAgICAgICAgICAgICAgICAgc3R5bGU9InotaW5kZXg6IDk5OTk5OSI+CiAgICAgICAgICAgIDwvaW1nPgogICAgICAgICAgICAKPC9ib2R5Pgo8c2NyaXB0PiAgICAKICAgIAoKICAgICAgICAgICAgCiAgICAgICAgICAgICAgICB2YXIgc291dGhXZXN0ID0gTC5sYXRMbmcoLTkwLCAtMTgwKTsKICAgICAgICAgICAgICAgIHZhciBub3J0aEVhc3QgPSBMLmxhdExuZyg5MCwgMTgwKTsKICAgICAgICAgICAgICAgIHZhciBib3VuZHMgPSBMLmxhdExuZ0JvdW5kcyhzb3V0aFdlc3QsIG5vcnRoRWFzdCk7CiAgICAgICAgICAgIAoKICAgICAgICAgICAgdmFyIG1hcF8wZGYwNTliZWUwNDI0NGE1YTUyYmZiNjc1ODFjMjdkOSA9IEwubWFwKAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJ21hcF8wZGYwNTliZWUwNDI0NGE1YTUyYmZiNjc1ODFjMjdkOScsCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7Y2VudGVyOiBbLTEzLC0zOC4xNV0sCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB6b29tOiAxMCwKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1heEJvdW5kczogYm91bmRzLAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgbGF5ZXJzOiBbXSwKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHdvcmxkQ29weUp1bXA6IGZhbHNlLAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY3JzOiBMLkNSUy5FUFNHMzg1NwogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9KTsKICAgICAgICAgICAgCiAgICAgICAgCiAgICAKICAgICAgICAgICAgdmFyIHRpbGVfbGF5ZXJfYThkZDMyMjhlZjY1NGM0YmE5MzVmNmUxNDQ0YTIzNDUgPSBMLnRpbGVMYXllcigKICAgICAgICAgICAgICAgICdodHRwczovL3tzfS50aWxlLm9wZW5zdHJlZXRtYXAub3JnL3t6fS97eH0ve3l9LnBuZycsCiAgICAgICAgICAgICAgICB7CiAgICAgICAgICAgICAgICAgICAgbWF4Wm9vbTogMTgsCiAgICAgICAgICAgICAgICAgICAgbWluWm9vbTogMSwKICAgICAgICAgICAgICAgICAgICBjb250aW51b3VzV29ybGQ6IGZhbHNlLAogICAgICAgICAgICAgICAgICAgIG5vV3JhcDogZmFsc2UsCiAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRpb246ICdEYXRhIGJ5IDxhIGhyZWY9Imh0dHA6Ly9vcGVuc3RyZWV0bWFwLm9yZyI+T3BlblN0cmVldE1hcDwvYT4sIHVuZGVyIDxhIGhyZWY9Imh0dHA6Ly93d3cub3BlbnN0cmVldG1hcC5vcmcvY29weXJpZ2h0Ij5PRGJMPC9hPi4nLAogICAgICAgICAgICAgICAgICAgIGRldGVjdFJldGluYTogZmFsc2UKICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICApLmFkZFRvKG1hcF8wZGYwNTliZWUwNDI0NGE1YTUyYmZiNjc1ODFjMjdkOSk7CgogICAgICAgIAo8L3NjcmlwdD4=\" style=\"position:absolute;width:100%;height:100%;left:0;top:0;\" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div></div>"
+      ],
+      "text/plain": [
+       "<folium.folium.Map at 0x7f61c4154c18>"
+      ]
+     },
+     "execution_count": 2,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "from folium.plugins import FloatImage\n",
+    "\n",
+    "url = 'https://raw.githubusercontent.com/SECOORA/static_assets/master/maps/img/rose.png'\n",
+    "\n",
+    "m = folium.Map([-13, -38.15], zoom_start=10)\n",
+    "\n",
+    "FloatImage(url, bottom=60, left=70).add_to(m)\n",
+    "\n",
+    "m.save(os.path.join('results', 'FloatImage.html'))\n",
+    "\n",
+    "m"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.5.2"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 1
+}

folium/plugins/__init__.py

@@ -15,13 +15,17 @@
 from .image_overlay import ImageOverlay
 from .fullscreen import Fullscreen
 from .polyline_text_path import PolyLineTextPath
+from .float_image import FloatImage
 
-__all__ = ['MarkerCluster',
-           'ScrollZoomToggler',
-           'Terminator',
-           'BoatMarker',
-           'TimestampedGeoJson',
-           'HeatMap',
-           'ImageOverlay',
-           'Fullscreen',
-           'PolyLineTextPath']
+__all__ = [
+    'MarkerCluster',
+    'ScrollZoomToggler',
+    'Terminator',
+    'BoatMarker',
+    'TimestampedGeoJson',
+    'HeatMap',
+    'ImageOverlay',
+    'Fullscreen',
+    'PolyLineTextPath',
+    'FloatImage'
+    ]

folium/plugins/float_image.py

@@ -0,0 +1,39 @@
+# -*- coding: utf-8 -*-
+"""
+FloatImage plugin
+-----------------
+
+Adds a floating image in HTML canvas on top of the map.
+"""
+from jinja2 import Template
+
+from branca.element import MacroElement
+
+
+class FloatImage(MacroElement):
+    def __init__(self, image, bottom=75, left=75):
+        """Adds a floating image in HTML canvas on top of the map."""
+        super(FloatImage, self).__init__()
+        self._name = 'FloatImage'
+        self.image = image
+        self.bottom = bottom
+        self.left = left
+
+        self._template = Template("""
+            {% macro header(this,kwargs) %}
+                <style>
+                    #{{this.get_name()}} {
+                        position:absolute;
+                        bottom:{{this.bottom}}%;
+                        left:{{this.left}}%;
+                        }
+                </style>
+            {% endmacro %}
+
+            {% macro html(this,kwargs) %}
+            <img id="{{this.get_name()}}" alt="float_image"
+                 src="{{ this.image }}"
+                 style="z-index: 999999">
+            </img>
+            {% endmacro %}
+            """)

tests/plugins/test_float_image.py

@@ -0,0 +1,44 @@
+# -*- coding: utf-8 -*-
+"""
+Test FloatImage
+---------------
+"""
+
+from jinja2 import Template
+
+import folium
+from folium import plugins
+
+
+def test_float_image():
+    m = folium.Map([45., 3.], zoom_start=4)
+    url = 'https://raw.githubusercontent.com/SECOORA/static_assets/master/maps/img/rose.png'
+    szt = plugins.FloatImage(url, bottom=60, left=70)
+    m.add_child(szt)
+    m._repr_html_()
+
+    out = m._parent.render()
+
+    # Verify that the div has been created.
+    tmpl = Template("""
+        <img id="{{this.get_name()}}" alt="float_image"
+        src="https://raw.githubusercontent.com/SECOORA/static_assets/master/maps/img/rose.png"
+        style="z-index: 999999">
+        </img>
+    """)
+    assert ''.join(tmpl.render(this=szt).split()) in ''.join(out.split())
+
+    # Verify that the style has been created.
+    tmpl = Template("""
+        <style>
+            #{{this.get_name()}} {
+                position:absolute;
+                bottom:60%;
+                left:70%;
+                }
+        </style>
+    """)
+    assert ''.join(tmpl.render(this=szt).split()) in ''.join(out.split())
+
+    bounds = m.get_bounds()
+    assert bounds == [[None, None], [None, None]], bounds