Change the marker icon from the Leaflet package without using JS

[Tigrast]

Is it possible to change a Leaflet marker icon without directly using JavaScript?

Currently, I am using the following approach in Python:

map = ui.leaflet(center=(0, 0), zoom=2)
arrowhead = map.marker(latlng=end, options={'icon': iconX})

To generate the custom icon, I tried using a JavaScript function:

function getArrowIconJs(){
    var iconX = L.divIcon({
        className: 'marker-icon',
        html: '<svg width="30" height="40">\
                <path d="M15 0 L0 40 L15 30 Z" fill="black"/>\
                </svg>',
        iconAnchor: [15, 20],
        iconSize: [30, 40],
    });
    return iconX
}

I called this function using:

async def getArrowIcon():
    return await ui.run_javascript('getArrowIconJs()')

await ui.context.client.connected()
iconX = await getArrowIcon()

However, this gives me the error: "JavaScript did not respond within 1.0 s for 'iconX = await getArrowIcon()'".

Is there a way to resolve this or an alternative approach to set the marker icon without relying on JavaScript?

[falkoschindler]

Hi @Tigrast,

Can you please try to wrap your code snippets into a minimum reproducible code example? This would allow us and the community to help more efficiently. Thanks!
Why is it important to provide a minimal reproducible example?

And what do you mean with "without using JavaScript"? Are you looking for a pure Python API?

[Tigrast]

The JavaScript file needed to be properly included in the HTML header for the icon to return correctly.

[brian2drifter]

I don't understand this post. I have an example that works and populates the Python iconX variable as the print(iconX)verifies. So I had naively assumed that marker = map.marker(latlng=(51.503, -0.08),options={'icon' : iconX}) would then display the icon as surely that was what the OP must have been intending?

I can't make it work which I assume I because Nicegui leaflet doesn't support 'options={'icon' : iconX})` so I wonder if the OP would like to comment if he got something working and how.

I'm assuming that to have bespoke icons I will need to handle everything in JS (which is a shame as I don't have any JS experience!) - but in that case why the OP surface the JS iconX variable to Python?

Apologies for my naivety in all of this - newby to web interface coding

Incidentally I'm converting an Python app that works with fine with Folium and produces a HTML map with markers coloured depending on a property (opening time).

// /static/mymarker.js

function mymarker(){

       var iconX = L.icon({
        iconUrl: 'my-icon.png',
        iconSize: [25, 41],
        iconAnchor: [18, 40],
        popupAnchor: [-3, -20]
    });

    return iconX
}

from nicegui import ui, app

app.add_static_files(url_path='/static', local_directory='static')

async def getMyMarker():
    return await ui.run_javascript('mymarker()')

@ui.page('/')
async def page():
    ui.add_head_html("<script src='/static/mymarker.js'></script>")
    map = ui.leaflet(center=(51.505, -0.09), zoom=13).style("height: 800px;")
    await ui.context.client.connected()
    iconX = await getMyMarker()
    print(iconX)
    marker = map.marker(latlng=(51.503, -0.08),options={'icon' : iconX})

ui.run()