Folium map in iPython not displaying map. Throws error: 'Uncaught ReferenceError: L is not defined'

Question

Attempting to display a basic map in iPython using folium leaflet library. Recent install of iPython through Anaconda with Folium installed with Pip. Confirmed everything is up to date

ran this code in iPython

import folium
map = folium.Map(location=[48, -102], zoom_start=3)
map.create_map('map.html')
map

I receive a blank frame. I checked the console on the html. I receive a number of Failed to load resource: net::ERR_FILE_NOT_FOUND tracing back to an Uncaught ReferenceError: L is not defined. I checked the html document and found the leaflet reference looks like this:

    src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js">

I assume the issue is with the relative link but I have no found information in the folium docs to resolve this issue.

Thanks ya'll for the help. I look forward to paying it forward.

Answer 1

I've found this tutorial on Folium in iPython Notebooks quite helpful. Also, I did a detailed answer on this other Stackoverflow question which seems related.

To display in the iPython notebook, you need to generate the html with the myMap._build_map() method, wrap it in an iframe, and return the iFrame to iPython for display.

Here's an example for your situation:

import folium  
from IPython.display import HTML
myMap = folium.Map(location=[48, -102], zoom_start=3)
myMap._build_map() 
mapWidth, mapHeight = (400,500) # width and height of the iFrame in pixels
srcdoc = myMap.HTML.replace('"', '"')
embed = HTML('<iframe srcdoc="{}" '
             'style="width: {}px; height: {}px; display:block; width: 50%; margin: 0 auto; '
             'border: none"></iframe>'.format(srcdoc, width, height))
embed

Note that the .create_map() method will save the full map HTML to a file, while you want to keep the HTML code handy for presentation in iPython- this is why we use ._build_map() instead. The line beginning with embed is where the magic happens- we wrap the HTML content generated by folium in an iframe which can be styled as desired, and then is returned as the cell's output. IPython internally calls .display() on the results returned to the cell, so you should have a nice, centered map.