Add hexadecimal color code option for marker icon background

[lhoupert]

Is your feature request related to a problem? Please describe.

When adding a marker on a folium map such as:

fm = folium.Map(location=(44,3), tiles="Stamen Terrain")
folium.Marker(
        location=(44,3.2),
        popup="data1",
        icon=folium.Icon(color='#8000ff',icon_color='#4df3ce', icon="star", prefix="fa"),
    ).add_to(fm)
fm

It seems that the background icon color cannot be an hexadecimal color:

color argument of Icon should be one of: {'lightgray', 'pink', 'darkred', 'red', 'lightblue', 'darkblue', 'darkpurple', 'green', 'blue', 'lightgreen', 'lightred', 'gray', 'cadetblue', 'orange', 'purple', 'darkgreen', 'black', 'beige', 'white'}.

Is there an easy way to implement that functionality?

I am happy to work on a PR if someone can tell me where to start :-)

[Conengmo]

This feature is not implemented in folium, but uses this Leaflet plugin: https://github.com/python-visualization/Leaflet.awesome-markers (link is to a fork hosted on our organization). Found this issue on the original repo that may be interesting: lennardv2/Leaflet.awesome-markers#89

[lhoupert]

Thank you it seems that the PR is in the pipeline: lennardv2/Leaflet.awesome-markers#74

[lhoupert]

In case it helps someone else, I found a workaround adapting this stackoverflow answer:

import folium
from folium.features import DivIcon

def number_DivIcon(color,number):
    """ Create a 'numbered' icon
    
    """
    icon = DivIcon(
            icon_size=(150,36),
            icon_anchor=(14,40),
#             html='<div style="font-size: 18pt; align:center, color : black">' + '{:02d}'.format(num+1) + '</div>',
            html="""<span class="fa-stack " style="font-size: 12pt" >>
                    <!-- The icon that will wrap the number -->
                    <span class="fa fa-circle-o fa-stack-2x" style="color : {:s}"></span>
                    <!-- a strong element with the custom content, in this case a number -->
                    <strong class="fa-stack-1x">
                         {:02d}  
                    </strong>
                </span>""".format(color,number)
        )
    return icon

col_hex = ['#440154',
 '#481a6c',
 '#472f7d',
 '#414487',
 '#39568c',
 '#31688e',
 '#2a788e',
 '#23888e',
 '#1f988b',
 '#22a884',
 '#35b779',
 '#54c568',
 '#7ad151',
 '#a5db36',
 '#d2e21b']

num = 0
loc = (43.613, 3.888)

fm = folium.Map(location=loc, tiles="Stamen Terrain")
folium.Marker(
        location=loc,
        popup="Delivery " + '{:02d}'.format(num+1),
        icon=folium.Icon(color='white',icon_color='white'),
        markerColor=col_hex[num],
    ).add_to(fm)
folium.Marker(
        location=loc,
        popup="Delivery " + '{:02d}'.format(num+1),
        icon= number_DivIcon(col_hex[num],num+1)
    ).add_to(fm)

fm

which returns:

[Conengmo]

There's indeed a PR open on that repo that implements this: lennardv2/Leaflet.awesome-markers#74. I haven't tried it out though, so I don't know how well it works.

Since we are hosting our own fork of that package, we could implement it there: https://github.com/python-visualization/Leaflet.awesome-markers. If somebody wants to open a PR, that's welcome.