Map with markers with Python and Folium


This blogpost explains how to build an interactive map with markers using Python and Folium. It explains how to add the markers at specific locations, and how to customize their appearance and popup using html.

If you're new into Folium, I strongly advise to read this introduction. It explains the basics: install the library, initialize a map, change tile, save as standalone html file, embed the map somewhere and so on.

Map initialization

Building a map with Folium always start by initializing it. Pick the tile type you want, and select the location and zoom you're interested in. In this example, we're going to consider the whole world, centered on Europe.

# import the library
import folium

# Make an empty map
m = folium.Map(location=[20,0], tiles="OpenStreetMap", zoom_start=2)

# Show the map
m
Make this Notebook Trusted to load map: File -> Trust Notebook

Add markers

Let's create a Pandas dataframe. It provides a numeric value for a few big cities, along with their geographic coordinates

# Import the pandas library
import pandas as pd

# Make a data frame with dots to show on the map
data = pd.DataFrame({
   'lon':[-58, 2, 145, 30.32, -4.03, -73.57, 36.82, -38.5],
   'lat':[-34, 49, -38, 59.93, 5.33, 45.52, -1.29, -12.97],
   'name':['Buenos Aires', 'Paris', 'melbourne', 'St Petersbourg', 'Abidjan', 'Montreal', 'Nairobi', 'Salvador'],
   'value':[10, 12, 40, 70, 23, 43, 100, 43]
}, dtype=str)

data
lon lat name value
0 -58 -34 Buenos Aires 10
1 2 49 Paris 12
2 145 -38 melbourne 40
3 30.32 59.93 St Petersbourg 70
4 -4.03 5.33 Abidjan 23
5 -73.57 45.52 Montreal 43
6 36.82 -1.29 Nairobi 100
7 -38.5 -12.97 Salvador 43

Now, loop through this dataframe, and add a marker to each location thanks to the Marker() function:

# add marker one by one on the map
for i in range(0,len(data)):
   folium.Marker(
      location=[data.iloc[i]['lat'], data.iloc[i]['lon']],
      popup=data.iloc[i]['name'],
   ).add_to(m)

# Show the map again
m
Make this Notebook Trusted to load map: File -> Trust Notebook

Save the map as a standalone html file if needed:

m.save('../../static/interactiveCharts/312-add-markers-on-folium-map.html')

Custom marker

It is possible to customize the markers. The icon parameter basically allows to include any html code, and you can pass some css to it with inline style

# Make an empty map
n = folium.Map(location=[20,0], tiles="OpenStreetMap", zoom_start=2)

# add marker one by one on the map
for i in range(0,len(data)):
   folium.Marker(
      location=[data.iloc[i]['lat'], data.iloc[i]['lon']],
      popup=data.iloc[i]['name'],
      icon=folium.DivIcon(html=f"""<div style="font-family: courier new; color: blue">{data.iloc[i]['name']}</div>""")
   ).add_to(n)

# Show the map again
n
Make this Notebook Trusted to load map: File -> Trust Notebook

Custom popup

Likewise, you can use any html code in the marker popups

# Make an empty map
n = folium.Map(location=[20,0], tiles="OpenStreetMap", zoom_start=2)

# add marker one by one on the map
for i in range(0,len(data)):
    html=f"""
        <h1> {data.iloc[i]['name']}</h1>
        <p>You can use any html here! Let's do a list:</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
        </p>
        <p>And that's a <a href="https://www.python-graph-gallery.com">link</a></p>
        """
    iframe = folium.IFrame(html=html, width=200, height=200)
    popup = folium.Popup(iframe, max_width=2650)
    folium.Marker(
        location=[data.iloc[i]['lat'], data.iloc[i]['lon']],
        popup=popup,
        icon=folium.DivIcon(html=f"""
            <div><svg>
                <circle cx="50" cy="50" r="40" fill="#69b3a2" opacity=".4"/>
                <rect x="35", y="35" width="30" height="30", fill="red", opacity=".3" 
            </svg></div>""")
    ).add_to(n)

# Show the map again
n
Make this Notebook Trusted to load map: File -> Trust Notebook

Map

Choropleth

Hexbin

Cartogram

Connection

Bubble

Contact & Edit

👋 This document is a work by Yan Holtz. Any feedback is highly encouraged. You can fill an issue on Github, drop me a message onTwitter, or send an email pasting yan.holtz.data with gmail.com.

This page is just a jupyter notebook, you can edit it here. Please help me making this website better 🙏!

Violin

Density

Histogram

Boxplot

Ridgeline

Scatterplot

Heatmap

Correlogram

Bubble

Connected Scatter

2D Density

Barplot

Spider / Radar

Wordcloud

Parallel

Lollipop

Circular Barplot

Treemap

Venn Diagram

Donut

Pie Chart

Dendrogram

Circular Packing

Line chart

Area chart

Stacked Area

Streamgraph

Map

Choropleth

Hexbin

Cartogram

Connection

Bubble

Chord Diagram

Network

Sankey

Arc Diagram

Edge Bundling

Colors

Interactivity

Animation with python

Animation

Cheat sheets

Caveats

3D