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.

[dheerusri324]

Hi @Conengmo! I see this issue has been open for a bit. I am a beginner looking to make some meaningful open-source contributions, and I would love to take a swing at this!

If this is still open and relevant, I'd like to try porting the fix from lennardv2/Leaflet.awesome-markers#74 over to the python-visualization fork as you suggested. Let me know if I'm good to go ahead and start digging in!

[hansthen]

Please go ahead. Contributions are greatly appreciated.

[dheerusri324]

Hi @hansthen, thanks for the green light! Quick question: the python-visualization/Leaflet.awesome-markers link mentioned earlier in this thread is currently throwing a 404. Have the awesome-markers assets been vendored directly into the main folium repository since 2022? Just want to make sure I am targeting my PR at the right codebase!

[hansthen]

It looks like it. This was before I joined the project. The awesome markers appear to be in map.py (class Icon). But if I look at the code, it also appears to support html color codes.

    icon_color : str, default 'white'
        The color of the drawing on the marker. You can use colors above,
        or an html color code.

Maybe this was implemented already.

[dheerusri324]

@hansthen, thanks for looking into that! You are right that icon_color (the symbol inside supports HTML hex codes.
​However, it looks like the color argument (the background of the marker itself) is still restricted to the hardcoded list of strings. If a user passes a hex code there, it currently throws a ValueError.
​I'll dive into folium/map.py to look at the Icon class as you suggested, and see if I can implement the hex support for the background color argument. I'll also track down how the awesome-markers CSS is being loaded so I can port the necessary frontend logic!

[dheerusri324]

Hi @hansthen ! Just wanted to loop back and let you know I've opened PR #2211 to fix this.
​I ended up bypassing the CDN limitation by dynamically injecting the custom CSS from the Python wrapper whenever a hex color is passed. Let me know what you think when you have a chance to review it!
​(Note: Since I'm a first-time contributor here, it looks like the GitHub Actions workflows are currently paused and just need a quick manual approval to run the tests). Thanks!