Popup update ; with examples

[BibMartin]

I'm not sure this effectively addresses #288, but it's a step in the direction of better popups.

See http://nbviewer.ipython.org/github/bibmartin/folium/blob/issue288/examples/Popups.ipynb for example notebook.

[ocefpaf]

I believe Sphinx will complain about this indentation.

[BibMartin]

Fixed.

[ocefpaf]

I am 👍, even though the extra complexity worries me a little bit. (But I did like the map-on-map example 😉)

@themiurgo Can you review and merge this one? If not ping it back to me.

[ocefpaf]

If @themiurgo cannot take a look at this until tomorrow morning I will review it. (Not the timezones we all are. @BibMartin seems to be in a never-ending "morning sprint" due to the number of PRs ;-)

[themiurgo]

I'm ready to merge, squash away first.

[BibMartin]

@themiurgo

I'm ready to merge, squash away first.

Squashed.

@ocefpaf

@BibMartin seems to be in a never-ending "morning sprint" due to the number of PRs ;-)

Sorry, no PR today ; I'm travelling 😉

[ocefpaf]

Sorry, no PR today ; I'm travelling 😉

Enjoy your travels and ☺️

[themiurgo]

Congrats and enjoy your trip! 🎉

[BibMartin]

Thanks ! 🚆

[soedr]

@BibMartin How does one get the popup to run the code in the html popup?

In the Fancy HTML popup example you linked to, from numpy import * <br> exp(-2*pi) is represented as is, rather than what exp(-2*pi) evaluates to.

[BibMartin]

@soedr

@BibMartin How does one get the popup to run the code in the html popup?

In the Fancy HTML popup example you linked to, from numpy import *
exp(-2pi) is represented as is, rather than what exp(-2pi) evaluates to.

There are two possible understanding of your question, because folium/branca rely on a python backend that generates a javascript frontent.

• If you want to produce a constant ouput in python, I suggest to evaluate the html before using folium:

from numpy import *
html="""
    <h1> This is a big popup</h1><br>
    With a few lines of code...
    <p>
    <code>
        from numpy import *<br>
        {}
    </code>
    </p>
    """.format(exp(-2*pi))
...

You shall have a look at jinja2 that is a great templating library (heavily used in folium btw).

• If you want to produce an interactive output, based on other frontend information, then you need to go into javascript programming and folium is not really helpful here.

[soedr]

@BibMartin Sorry for the confusion and thanks for the reply. I'm trying to add row values from a pandas DataFrame, where the content of the html is a function of the value of a particular column in the row corresponding to the coordinates used for that row.

Example:

import folium
import pandas as pd

df = pd.DataFrame.from_dict(
    {'label1': ['foo', 'bar'],
     'label2': ['bob', 'rob'],
     'lat': [59.315875,59.315875],
     'lon': [18.054837,18.054837]
    }
)

m = folium.Map(
    location = [59.315875, 18.054837],
    tiles = 'CartoDB Positron',
    zoom_start = 9,
    attr = "http://cartodb.com/attributions"
    )

df.apply(lambda row: folium.Marker(
    location = [row['lat'],row['lon']],
    popup = folium.Popup(folium.element.Iframe(
        html="""
            <b>label1: </b> {} </br>
            <b>label2: </b> {}
            """.format(row['label'],row['label2']), 
        width=500, 
        height = 300), 
        max_width=2650),
    icon = folium.Icon(color='red', 
                   icon='car',
                   icon_color='white',
                   prefix='fa'
                  )
    ).add_to(m), axis = 1)
m

This produces AttributeError: ("module 'folium' has no attribute 'element'", 'occurred at index 0')

I found an alternative approach by alexkp here, which adjusted to my example becomes:

df.apply(lambda row: folium.Marker(
    location = [row['lat'],row['lon']],
    popup = folium.Popup(folium.Html("""
            <b>label1: </b> row['label'] </br>
            <b>label2: </b> row['label2']
            """, script=True), max_width=2650),
    icon = folium.Icon(color='red', 
                   icon='car',
                   icon_color='white',
                   prefix='fa'
                  )
    ).add_to(m), axis = 1)
m

This option doesn't throw an error, but also doesn't display the map (I'm unable to find out why).

As a reference, doing this with R's Leaflet interface works as follows:

library(leaflet)
library(leaflet.extras)
library(dplyr)

leaflet() %>%
  addProviderTiles(providers$CartoDB.Positron ) %>%
  setView(55.283741, 25.199251, zoom = 9) 
  addAwesomeMarkers(lng = ~lon,
                    lat = ~lat,
                    popup = ~paste("<b> label1: </b>", label1,"<br/>",
                                   "<b> label2: </b>", label2),
                    group = ~driver_name,
                    icon = awesomeIcons(
                      icon = 'fa-user',
                      iconColor = 'black',
                      library = 'fa',
                      markerColor = 'lightgreen'),
                    data = df
  )