Question:
What’s an alternative of Leaflet (leafletjs.com) for Python w/ Flask?
1 Like
Hello there, @RedCoder! How’s everything going? By the way, I’m quite certain that Folium can serve as a substitute for Leaflet when working with Python and Flask. You can achieve something similar to the following with this code:
import folium
app = Flask(__name__)
@app.route('/')
def index():
m = folium.Map(location=[51.5074, -0.1278], zoom_start=10) # Creates a map using a specific location.
folium.Marker([51.5074, -0.1278], tooltip='London').add_to(m) # Add markers, popups, or other map features as needed.
return m.get_root().render() # Render the map in your template.
if __name__ == '__main__':
app.run(debug=True)
Great! Thanks for asking! I just got TL3, so I’m pretty happy about that 
Is Folium free? Also, is there a official documentation and is there any ability to add custom waypoints with custom icons to a map?
1 Like
Folium does have official documentation that you can refer to for learning how to use it effectively, you can find the official documentation on the project’s GitHub repository or website.
Yes, it’s possible. Folium has the capability to create personalized markers with custom icons and pop-up messages.
Could you help me interrogate this into my Repl? How would I initialize it and create a custom marker?
1 Like
Yeah, I can assist you with that. In fact, I already have some code that accomplishes this task. I’ll provide it for you right here:
from flask import Flask, render_template
import folium
app = Flask(__name__)
@app.route('/')
def index():
m = folium.Map(location=[51.5074, -0.1278], zoom_start=12) # London coordinates as an example
custom_icon1 = folium.CustomIcon(icon_image='marker1.png', icon_size=(40, 40))
custom_icon2 = folium.CustomIcon(icon_image='marker2.png', icon_size=(40, 40))
marker1 = folium.Marker(location=[51.5074, -0.1278], icon=custom_icon1, popup='Custom Marker 1')
marker2 = folium.Marker(location=[51.5174, -0.1378], icon=custom_icon2, popup='Custom Marker 2')
marker1.add_to(m)
marker2.add_to(m)
map_html = m._repr_html_()
return render_template('index.html', map_html=map_html)
if __name__ == '__main__':
app.run(debug=True)
Index.html:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
{{ map_html | safe }}
</body>
</html>
You’re welcome. :))
1 Like
Great! It works very well! I do have a few questions, though. For one, Is it possible to make a custom <div> element show up upon clicking on a custom marker?
1 Like
Yes, it is possible.
from flask import Flask, render_template
import folium
app = Flask(__name__)
@app.route('/')
def custom_map():
m = folium.Map(location=[51.5074, -0.1278], zoom_start=12)
custom_icon = folium.CustomIcon(icon_image='custom_icon.png', icon_size=(40, 40))
popup_content = """
<div id="custom-popup" style="display: none;">
<h2>Custom Popup</h2>
<p>This is a custom div element that shows up when you click the marker.</p>
</div>
"""
marker = folium.Marker(location=[51.5074, -0.1278], icon=custom_icon, popup=folium.Popup(popup_content, max_width=300))
marker.add_to(m)
js_code = """
<script>
var marker = L.DomUtil.get("custom-popup");
var popup = L.DomUtil.get("custom-popup");
marker.addEventListener("click", function() {
if (popup.style.display === "none") {
popup.style.display = "block";
} else {
popup.style.display = "none";
}
});
</script>
"""
m.get_root().html.add_child(folium.Element(js_code)) # add the js code to the map.
map_html = m._repr_html_()
return render_template('custom_map.html', map_html=map_html)
if __name__ == '__main__':
app.run(debug=True)
custom_map.html:
<!DOCTYPE html>
<html>
<head>
<title>Custom Map Example</title>
<!-- css -->
</head>
<body>
<div id="map" style="width: 100%; height: 500px;"></div>
{{ map_html | safe }}
</body>
</html>
Great Thanks!
Also, how would I add a custom styling to the iframe? I can do it via devtools, but that’s not what I want lol.
1 Like
If you wish to apply personalized styling to an <iframe> inside your HTML template within a Flask application, you have the option to achieve this by either integrating inline CSS or connecting it to an external CSS stylesheet.
If I’ve addressed all your questions, kindly mark one of my responses as the solution. ;]
@Sky I guess I shouldn’t have gotten my hopes up 
I was hoping to make it so that I could apply a class to that induvial <iframe> but I guess it’s okay!
Anyways, thanks for the help!
Few more things:
-
While the custom waypoint is selected, nothing shows.
-
Is it possible to make the map semi-3D upon clicking a button?
-
Is it possible to make markers that instead of having a pop-up, make a separate element appear?
1 Like
What you can, did you misunderstand what I said?
I may have. I mean making the <iframe> look something like this:
<iframe class="best-class-ever">
1 Like
you can apply a class to an <iframe> element in HTML to style it using CSS or to target it with JavaScript. To apply a class to an <iframe>, you simply include the class attribute within the opening tag of the <iframe> and set it to the desired class name.
<iframe src="https://www.example.com" class="custom-iframe"></iframe>
Creating a true 3D map demands advanced tools like Three.js, not Folium or Leaflet, designed for 2D maps. You can mimic 3D with elevation data, but it’s not genuine 3D.
Yes I understand that, but the map_html has a <iframe> and I’m not sure how to directly edit, as this can’t be done manually as it is a variable.
I don’t need a truly 3D map, so mimicking the elevation data is probably what I am looking for.
1 Like
You can make markers trigger a separate element when clicked, instead of a pop-up.
@Sky How would I?
This is still occurring.
Do you know how to do this?
Finally, is it possible to display a SVG as a custom marker image?
1 Like
- Inspect the browser’s developer console for JavaScript errors or warnings.
- Check for CSS styles (e.g.,
display: none) that may hide the custom waypoint content. - Verify event listeners correctly trigger content display when the waypoint is selected.
- If using a Folium popup, ensure its content is properly defined to appear on waypoint selection.
- Confirm that the map renders correctly, and the custom waypoint marker is added with the correct properties, including associated content.
To make a marker trigger a separate element instead of a popup using Python Folium within a Flask application, you can achieve this by using JavaScript to control the visibility of the separate element when the Folium marker is clicked.
Yes, I do have an explanation, but it will require some time to write it.
Yep, it is possible to display an SVG image as a custom marker image in Folium.