CODEWITHSUNDEEP
pythonleafletfolium
Steven
Steven

Reputation: 93

Folium markers with numbers inside

I would like to make some markers on the map using Folium with some numbers inside the markers. The markers I want to look like the standard inverted drop shapes that Google Maps is using.
I saw that for folium.Marker you can use the parameter icon=folium.DivIcon("html code here"), but I don't know how I could make the html code so the marker looks like an inverted drop standard marker.
I saw a nice example here, using leaflet.js: https://github.com/iatkin/leaflet-svgicon, and here is their demo: http://iatkin.github.io/leaflet-svgicon/.

leaflet-svgicon example

I just don't know how to implement that in Python. The numbers that I would like to place inside the markers are some kind of rating numbers that have 3 characters (1 digit, a dot, and a decimal), for example 3.4, 4.8, 2.5, etc. the values are from 0.0 to 5.0. This type of marker shape is fine too:

enter image description here

I saw some other solutions like this example, that show circles and showing the numbers inside, but it doesn't looks as nice as the regular pointy pushpin kinf of marker: Numbers in map marker in Folium

Thanks,
Steven

Upvotes: 4

Views: 3971

Answers (1)

Orlando G
Orlando G

Reputation: 327

Hello I did something similar, the result is the following:

enter image description here

The code is:

import folium
import folium.plugins as plugins

# BASE MAP
n = folium.Map(location=[20.299172882895903,-103.18423327532622], zoom_start = 10)
    
for i in range(0,len(DF)):
    html=f"""
        <h2>  Información de la ruta </h2>
        <p> Ruta: {DF.iloc[i]['route_id']}  </p>
        <p> Secuencia de visita: {DF.iloc[i]['sequencia']}  </p>
        """

    iframe = folium.IFrame(html=html, width=200, height=150)
    popup = folium.Popup(iframe, max_width=650)
    folium.Marker(
        location=[DF.iloc[i]['latitude'], DF.iloc[i]['longitude']], popup=popup,
        icon=plugins.BeautifyIcon(
                         icon="arrow-down", icon_shape="marker",
                         number=DF.iloc[i]['sequencia'],
                         border_color= itinerario_lunes.iloc[i]['hex_code'],
                         background_color=itinerario_lunes.iloc[i]['hex_code']
                     )
    ).add_to(n)

# Show the map again
n

Upvotes: 7

Related Questions