{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# How to create Popups" ] }, { "cell_type": "code", "execution_count": 1, "metadata": { "collapsed": false }, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "../folium/__init__.py\n", "0.2.0.dev\n" ] } ], "source": [ "import sys\n", "sys.path.insert(0,'..')\n", "import folium\n", "print (folium.__file__)\n", "print (folium.__version__)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Simple popups" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "You can define your popup at the feature creation, but you can also overwrite them afterwards:" ] }, { "cell_type": "code", "execution_count": 2, "metadata": { "collapsed": false }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", "
\n", " \n", "
" ], "text/plain": [ "" ] }, "execution_count": 2, "metadata": {}, "output_type": "execute_result" } ], "source": [ "m = folium.Map([45,0], zoom_start=4)\n", "\n", "folium.Marker([45,-30], popup=\"inline implicit popup\").add_to(m)\n", "\n", "folium.CircleMarker([45,-10], radius=1e5, popup=folium.Popup(\"inline explicit Popup\")).add_to(m)\n", "\n", "ls = folium.PolyLine([[43,7],[43,13],[47,13],[47,7],[43,7]], color='red')\n", "ls.add_children(folium.Popup(\"outline Popup on Polyline\"))\n", "ls.add_to(m)\n", "\n", "gj = folium.GeoJson({ \"type\": \"Polygon\", \"coordinates\": [[[27,43],[33,43],[33,47],[27,47]]]})\n", "gj.add_children(folium.Popup(\"outline Popup on GeoJSON\"))\n", "gj.add_to(m)\n", "\n", "m" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Vega Popup" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "You may know that it's possible to create awesome Vega charts with (or without) `vincent`. If you're willing to put one inside a popup, it's possible thanks to `folium.Vega`." ] }, { "cell_type": "code", "execution_count": 3, "metadata": { "collapsed": false }, "outputs": [], "source": [ "import vincent, json\n", "import numpy as np\n", "\n", "scatter_points = {\n", " 'x' : np.random.uniform(size=(100,)),\n", " 'y' : np.random.uniform(size=(100,)),\n", " }\n", "\n", "# Let's create the vincent chart.\n", "scatter_chart = vincent.Scatter(scatter_points,\n", " iter_idx='x',\n", " width=600,\n", " height=300)\n", "\n", "# Let's convert it to JSON.\n", "scatter_json = scatter_chart.to_json()\n", "\n", "# Let's convert it to dict.\n", "scatter_dict = json.loads(scatter_json)\n" ] }, { "cell_type": "code", "execution_count": 4, "metadata": { "collapsed": false }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", "
\n", " \n", "
" ], "text/plain": [ "" ] }, "execution_count": 4, "metadata": {}, "output_type": "execute_result" } ], "source": [ "m = folium.Map([43,-100], zoom_start=4)\n", "\n", "# Let's create a Vega popup based on scatter_chart.\n", "popup = folium.Popup(max_width=800)\n", "folium.Vega(scatter_chart, height=350, width=650).add_to(popup)\n", "folium.Marker([30,-120], popup=popup).add_to(m)\n", "\n", "# Let's create a Vega popup based on scatter_json.\n", "popup = folium.Popup(max_width=800)\n", "folium.Vega(scatter_json, height=350, width=650).add_to(popup)\n", "folium.Marker([30,-100], popup=popup).add_to(m)\n", "\n", "# Let's create a Vega popup based on scatter_dict.\n", "popup = folium.Popup(max_width=800)\n", "folium.Vega(scatter_dict, height=350, width=650).add_to(popup) \n", "folium.Marker([30,-80], popup=popup).add_to(m)\n", "\n", "m" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Fancy HTML popup" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Now, you can put any HTML code inside of a Popup, thaks to the `IFrame` object." ] }, { "cell_type": "code", "execution_count": 5, "metadata": { "collapsed": false }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", "
\n", " \n", "
" ], "text/plain": [ "" ] }, "execution_count": 5, "metadata": {}, "output_type": "execute_result" } ], "source": [ "m = folium.Map([43,-100], zoom_start=4)\n", "\n", "html=\"\"\"\n", "

This is a big popup


\n", " With a few lines of code...\n", "

\n", " \n", " from numpy import *
\n", " exp(-2*pi)\n", " \n", "

\n", " \"\"\"\n", "iframe = folium.element.IFrame(html=html, width=500, height=300)\n", "popup = folium.Popup(iframe, max_width=2650)\n", "\n", "folium.Marker([30,-100], popup=popup).add_to(m)\n", "\n", "m" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Note that you can put another `Figure` into an `IFrame` ; this should let you do stange things..." ] }, { "cell_type": "code", "execution_count": 6, "metadata": { "collapsed": false }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", "
\n", " \n", "
" ], "text/plain": [ "" ] }, "execution_count": 6, "metadata": {}, "output_type": "execute_result" } ], "source": [ "# Let's create a Figure, with a map inside.\n", "f = folium.element.Figure()\n", "folium.Map([-25,150], zoom_start=3).add_to(f)\n", "\n", "# Let's put the figure into an IFrame.\n", "iframe = folium.element.IFrame(width=500, height=300)\n", "f.add_to(iframe)\n", "\n", "# Let's put the IFrame in a Popup\n", "popup = folium.Popup(iframe, max_width=2650)\n", "\n", "# Let's create another map.\n", "m = folium.Map([43,-100], zoom_start=4)\n", "\n", "# Let's put the Popup on a marker, in the second map.\n", "folium.Marker([30,-100], popup=popup).add_to(m)\n", "\n", "# We get a map in a Popup. Not really useful, but powerful.\n", "m" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Conclusion\n", "\n", "That's all folks !\n", "\n", "Hope it'll be useful to you. Don't hesitate to provide a feedback on what can be improved, which method do you prefer, etc." ] } ], "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.4.3" } }, "nbformat": 4, "nbformat_minor": 0 }