ovcrash
ovcrash

Reputation: 15

Using fontawesome icons in dash-leaflet webapp

i'm using an dash-leaftlet app with a real-time map. The markers are updated every 30 secondes, that works. Now i would like to change the icon and use the fontawesome icons. That doesn't work, i tried reading the documentation but nothing works. Before that i was using folium in the same matter, i was able to make the marker with a fontawesome icon, but in dash-leaflet that seems really to complicated.

i'm aiming for something like this :

enter image description here

Here is my current code, that does show the fontawesome icon, but not like to image above. In the end, i'm aiming for something like in the image above, and be able to change the color of the marker/icon.

[...]

external_scripts = [
    {
        'src':'https://kit.fontawesome.com/6f4324546a.js',
        'crossorigin':'anonymous'
    }
]

app = Dash(__name__,
           external_scripts=external_scripts)

[...]

# Define two different icon options
green_icon = dict(
    html='<i class="fa-solid fa-kiwi-bird" style="color: green;"></i>',
    className='myDivIcon',
    iconSize=[40, 40]
)

red_icon = dict(
    html='<i class="fa-solid fa-kiwi-bird" style="color: red;"></i>',
    className='myDivIcon',
    iconSize=[40, 40]
)

def choose_icon(condition):
    return green_icon if condition else red_icon

[...]

    markers_data = []
    for bird in bird_map_devices:
        if bird['gps'] != 'False':
            markers_data.append(
                dl.DivMarker(
                    position=(bird['gps']['Location']['Latitude'], bird['gps']['Location']['Longitude']),
                    children=[
                        dl.Tooltip(bird['name'])
                    ],
                    iconOptions=choose_icon(True)
                    #icon=dl.Icon(color='red'),
                )
            )
    
    return [dl.TileLayer()] + markers_data

everything is mention.

Upvotes: 0

Views: 222

Answers (0)

Related Questions