iPython does not show Folium map due to an error message stating: 'Uncaught ReferenceError: L is not defined'

Attempting to showcase a basic map in iPython using the Folium leaflet library. Recently installed iPython via Anaconda with Folium added through Pip. Verified that everything is fully updated

Ran this code in iPython

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

However, I am encountering a blank frame. Upon checking the console on the html file, I noticed multiple "Failed to load resource: net::ERR_FILE_NOT_FOUND" errors pointing to an 

Uncaught ReferenceError: L is not defined
. The leaflet reference in the html document appears as follows:

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

I suspect the issue lies with the relative link, but I have yet to find any information in the Folium documentation to help resolve this matter.

Thank you all for your assistance. I am eager to return the favor.

javascriptdictionaryipythonleafletfolium

Answer №1

This tutorial on using Folium in iPython Notebooks has been incredibly useful to me. Additionally, I provided a thorough response to a related question on Stackoverflow.

If you want to display a map in an iPython notebook, you'll need to utilize the myMap._build_map() method to generate the HTML, place it within an iframe, and then return the iframe to iPython for presentation.

Here's a specific example for implementing this:

import folium  
from IPython.display import HTML
myMap = folium.Map(location=[48, -102], zoom_start=3)
myMap._build_map() 
mapWidth, mapHeight = (400,500) # dimensions 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

It's important to note that the .create_map() method saves the full map HTML to a file, while utilizing ._build_map() instead ensures you have easy access to the HTML code for displaying in iPython. The line starting with embed is where the transformation occurs- we encapsulate the folium-generated HTML content within a styled iframe, allowing for customization before being output as the cell's result. IPython automatically triggers .display() on the returned outcome, resulting in a beautifully centered map.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for updating the content within an HTML tag with jQuery

I am looking to update the parameter value of an applet tag based on the selection from a dropdown menu. As I am new to jQuery, I would appreciate any guidance on how to achieve this using jQuery. This is my current applet code: <applet id="decisiontr ...

javascriptjquery

Encountered an error: "switch/mergeAll/flatten is not a valid function" when working with the http driver

As I delve into learning CycleJS, one thing that has caught my attention is the usage of Cycle's HTTP Driver. It seems that in order to reach the stream level, merging the response stream stream with RxJS switch/mergeAll is essential. However, when at ...

javascriptrxjsreactivexcyclejs

What is the best way to incorporate messages across various channels with a Discord bot?

While browsing through the questions of other users, I stumbled upon exactly what I was looking for. My dilemma now is how to make the same bot perform similar tasks on various channels but with different titles, footers, and so on... The primary code sni ...

javascriptnode.jsdiscorddiscord.jsbots

Trouble arises when attempting to add an image to a spherical object

I've searched through various threads, Googled extensively, watched YouTube tutorials.... But I can't seem to figure out how to apply a texture to my Sphere. When I run this code, all I see is a white Sphere without any texture showing up. Can so ...

javascriptthree.jstexturesexpo

Why does Typescript not enforce a specific return type for my function?

In my custom Factory function, I need to return a specific type: type Factory<T> = () => T; interface Widget { creationTime: number; } const createWidget: Factory<Widget> = () => { return { creationTime: Date.now(), foo: &a ...

javascripttypescript

Why is the response undefined when I resize an image twice using a JavaScript promise chain?

When I attempt to resize an image using the sharp library twice in my route handler, the result returned is undefined. Despite the resized images being displayed, it seems that calling image.resize and .toBuffer() multiple times is causing corruption in th ...

javascriptexpresssharp

Switch between viewing outcomes retrieved from a database

I'm fairly new to working with jQuery, PHP and databases, but I have managed to successfully create a database and retrieve data using PHP. When a search term is entered, the retrieved data from the database is displayed on the results page. For exam ...

javascriptjquery

The disappearance of HTML DOM nodes event

When I relocate certain DOM nodes from one context to another, some of the child nodes end up losing their event listeners. HTML <div><lots of nested nodes .../><div> <div> <div> <div#newNode></div> < ...

javascriptjquerydomjquery-events

Utilizing mailerlite popups within a Next.js application: A step-by-step guide

Trying to include a mailerlite popup in a client's next.js project has been quite challenging for me. I am struggling to convert the JavaScript snippets into jsx in order to make the popups work smoothly. Everything seems to function properly on initi ...

javascriptnext.jsjsx

Difficulty encountered during the installation of topojson on Ubuntu

I was attempting to install topojson by following the Let's Make a Map tutorial by Mike Bostock (). It seems that I have successfully updated Node.js and npm, as $which ogr2ogr is working fine. However, being new to programming and Ubuntu, I am in nee ...

node.jsdictionarynpmtopojson

Using JavaScript to open links in a new tab with the target

document.getElementById("mahacareer").onclick = function () { window.open("http://www.mahacareermitra.in", '_blank'); }; <a href="" id="mahacareer">Access the portal</a> Hi there, I am looking to have the link above open in a new tab ...

javascriptjqueryhtmltwitter-bootstrapcss

The $OnChange function fails to activate when passing an object by reference

Hi there, I've encountered a problem in my code that I'd like some help with. In my example, I have two components: Parent Component and Child Component. Both components share a field called rules. The Parent Component passes the rules field to ...

javascriptangularjsajax

Please anticipate the completion of data loading

I need help adding a custom tweet button to my Angular application. Below is the code I am using: HTML: <a href="" class="retweet" retweet target="_blank" data-info="{{ data.name }}"> Tweet </a> JS: myApp.directive('retweet', ...

javascriptjqueryangularjs

A guide on showcasing real-time data with Angular's service feature

home.component.ts <h1>{{ (reportsToday$ | async)}}</h1> <div echarts [options]="alertsDaily$ | async"> <div echarts [options]="alertsToday$ | async"> <div [onDisplay]="alertsDaily$ | async"> report.component.ts constructor( ...

javascriptangulartypescript

Enhance your iPhone web app with high-resolution retina images!

As I develop a mobile web application accessible on any smartphone, I have the index.html file available for review: The app includes 2 jQuery functions. One detects if the user is using an iPhone and displays a bubble with instructions to add it to the h ...

javascriptiphonecssweb-applications

What is the best approach to have a React page render only the specific component that has changed, rather than re

Recently, I've been facing an issue with a toggle implementation where the page always re-renders the entire content upon the first click of the toggle. Here is a snippet of how it looks: export default function Toggle({isChecked, label}: Props) { r ...

javascriptreactjsnext.js

The ternary operator is malfunctioning when it comes to the condition

I've encountered an issue while trying to integrate a custom MUI button into my project. My goal is to have the button enabled only when 2 specific objects are not empty, otherwise it should remain disabled. Despite my efforts, the code I've writ ...

javascriptreactjsmaterial-ui

Maximizing JavaScript DOM efficiency

In my code, I have numerous elements that need to be hidden and displayed dynamically. To facilitate this, I plan on utilizing the document.getElementById('x').style.display method. However, instead of directly using this method each time, I have ...

javascriptdom

Ways to create a looping mechanism with specified number restrictions and limitations

Can anyone assist me with this problem? I am looking to create a "looping" effect similar to the image provided. What is the logic behind this repetition? Thank you in advance for your help! Here is an example output: ...

javascriptreactjsreact-nativelogic

Enable users to upload and run JavaScript code on the server

Currently, I am diving into the world of javascript/nodeJS with the goal of creating an ERP solution. My aim is to give ERP end-users the ability to upload their own customized scripts which can then interact with existing ERP scripts. It goes without sayi ...

javascriptnode.jserp