<jupyter_start><jupyter_text>> If you're new into `Folium`, I strongly advise to read [this introduction](https://www.python-graph-gallery.com/288-map-background-with-folium). 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.<jupyter_code># import the library
import folium

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

# Show the map
m<jupyter_output><empty_output><jupyter_text>Add markers Let's create a `Pandas` dataframe. It provides a numeric value for a few big cities, along with their geographic coordinates<jupyter_code># 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<jupyter_output><empty_output><jupyter_text>Now, loop through this dataframe, and add a marker to each location thanks to the `Marker()` function:<jupyter_code># 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<jupyter_output><empty_output><jupyter_text>Save the map as a standalone html file if needed:<jupyter_code>m.save('../../static/interactiveCharts/312-add-markers-on-folium-map.html')<jupyter_output><empty_output><jupyter_text>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`<jupyter_code># 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<jupyter_output><empty_output><jupyter_text>Custom popup Likewise, you can use any `html` code in the marker popups<jupyter_code># 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<jupyter_output><empty_output>
{'fraction_non_alphanumeric': 0.15570652173913044, 'fraction_numerical': 0.03260869565217391, 'mean_word_length': 4.035567715458276, 'pattern_counts': {'":': 0, '<': 48, '<?xml version=': 0, '>': 48, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'chain_length': '6', 'dir': 'jupyter-structured-clean-dedup', 'id': '386657', 'license': '0BSD', 'n_tokens_mistral': 1379, 'n_tokens_neox': 1268, 'n_words': 374, 'path': 'src/notebooks/312-add-markers-on-folium-map.ipynb', 'repo_name': 's-lasch/The-Python-Graph-Gallery', 'size': '3680'}