Number inside Folium marker - Geopandas explore

Question

i want to add numbers inside folium markers based on one column in geodataframe.

Im expecting something like this Folium marker with number

In thispost they implemented it using BeautifyIcon.

Im using GeoPandas explore function with folium, so i dont know how to put the numbers without a loop like they do in the other post.

Here is what i tried, with no luck. Its just throws error "Object type series is not JSON serializable".

    import folium.plugins as plugins
    gdfNORTE.explore(
        m=m,  
        marker_type='marker', 
        #marker_kwds={'icon': folium.map.Icon(icon='map-marker', prefix='fa')},
        marker_kwds={'icon': (plugins.BeautifyIcon(icon="map-marker", icon_shape="marker", number=gdfNORTE["Cantidad de veces visitado"]))},
        tooltip=["CALLE","NUMERO","ACT ECON","DESCRIPCION","CANT_TRAB","TRAB", "Cantidad de veces visitado"],  
        tooltip_kwds=dict(labels=True),  
        name="Domicilios visitados",
        prefer_canvas=True,
        
    
        
    )

Thanks.

Answer 1

Inspired by the linked Q/A, you can try this :

I'll be using the GeoDataFrame example used in the docs, to give you the general logic.

           City    Country  Latitude  Longitude                     geometry
0  Buenos Aires  Argentina    -34.58     -58.66  POINT (-58.66000 -34.58000)
1      Brasilia     Brazil    -15.78     -47.91  POINT (-47.91000 -15.78000)
2      Santiago      Chile    -33.45     -70.66  POINT (-70.66000 -33.45000)
3        Bogota   Colombia      4.60     -74.08    POINT (-74.08000 4.60000)
4       Caracas  Venezuela     10.48     -66.86   POINT (-66.86000 10.48000)

---

import folium
from folium.plugins import BeautifyIcon

# to simulate a label column and potentially, a color too
hex_colors = ["#ff7f0e", "#2ca02c", "#7f7f7f", "#1f77b4", "#9467bd"]
gdf["Label"], gdf["Color"] = range(1, len(gdf)+1), hex_colors

m = folium.Map(location= gdf.loc[0, ["Latitude", "Longitude"]].tolist(), zoom_start=10)

cols = ["City", "Longitude", "Latitude", "Label", "Color"]
    
for city, lon, lat, label, color in gdf[cols].to_numpy():

    # feel free to custom the html
    html=f"""<h4>{city}</h4>"""

    iframe = folium.IFrame(html=html, width=200, height=150)

    folium.Marker(
        location=[lat, lon], popup=folium.Popup(iframe, max_width=650),
        icon=BeautifyIcon(
            icon="arrow-down",
            icon_shape="marker",
            number=str(label),
            border_color= "#000000",
            background_color=color,
            text_color="#FFFFFF"
        )
    ).add_to(m)

gdf.explore(m=m)

Output :