Folium / Vincent interaction: 'Element object has no attribute 'html'

[stavskal]

So I'm creating and storing vincent.charts.Area objects in a list and when I pass them to the popup this error occurs at create_map call. Any idea why that might happen?

When I display the vincent in the IPython notebook everything works fine, when I try to create the map it brings up the error

densities[i][1] holds the vincent object

densities[i][1].to_json('lines'+str(i)+'.json') map_poi.circle_marker(location=[center[i,0], center[i,1]),radius=100, popup=(densities[i][1],'lines'+str(i)+'.json')

map_poi.create_map(path='mymap.html')

[BibMartin]

It sounds similar to #408, am I wrong?

[ocefpaf]

@stavskal I am closing as a won't fix even if the workaround in #408 does not work for you.

The reason is that we will drop support for Vincent popups in the next version because vincent is no longer developed. You can try to create full HTML-like plots with bokeh or mpld3 and embed them as HTML IFrames in folium.

[stavskal]

Now the map gets created although clicking the circles does not produce the popup. Any ideas?

[bakerbd]

@ocefpaf can you discuss this a little more. I understand that Vincent is no longer under development and support cannot continue forever for that but can you explain how to use an iframe within folium a little more

[ocefpaf]

Sorry. Should've sent some links showing you how to do this. I don't have simple and clean examples for bokeh and mpld3, but here is a notebook that uses bokeh plots and folium's IFrame. (See cell [14]). and here another one with mpld3.

BTW feel free to create examples and send a PR to our gallery:

https://github.com/ocefpaf/folium_notebooks

[bakerbd]

Ok. I think that I found out how to do it. Thank you for sending the link.

I'm going to try to add a few more of the leaflet plugins into folium's "plugins" for some data visualization for work. I'll most likely have to start a new thread once I start. Anyhow thanks again!

[ocefpaf]

Ok. I think that I found out how to do it. Thank you for sending the link.

Writing better example is in my TODO list. I'll ping this thread once I get to it.

I'm going to try to add a few more of the leaflet plugins into folium's "plugins" for some data visualization for work.

That would be awesome!

[bakerbd]

@ocefpaf I'm having a little trouble getting the iframe to work. Followed your example from the mpld3 notebook but all I see is the html code when the popup is done

mapa = folium.Map([35,-80], tiles='stamentoner', zoom_start=4)

popup = <div align='center'> HTML <br><iframe width="900" height="800" frameborder="0" scrolling="no" src="https://plot.ly/~bakerbd/375.embed"></iframe></div>

icon = folium.Icon(color="blue", icon="ok")

mapa.add_children(folium.Marker(location=[30,-100], popup=popup,icon=icon))

mapa.save('test.html')

[stavskal]

So if anyone is interested how to add a Vincent here is what worked for me: (densities[i] has the Vincent object)

vincent.core.initialize_notebook()

map_poi = folium.Map()
vega = folium.Vega(json.loads(densities[i].to_json()), width=350,height=200)
popup = folium.Popup(max_width=350).add_child(vega)
circle = folium.CircleMarker(location=[centers[i,0], centers[i,1]], radius=100, popup=popup)
map_poi.add_children(circle)

map_poi.create_map(path='maps/dbscanclusters.html')
IFrame('maps/dbscanclusters.html',width=700,height=350)

[ocefpaf]

@bakerbd see the updated example: http://nbviewer.jupyter.org/github/ocefpaf/folium_notebooks/blob/master/test_png_mpld3_vega_popup.ipynb