Select marker

[RichDijk]

Question

Thank you for making NiceGui, realy nice!
I am trying a leaflet app having markers. That works fine.
But the markers represent objects with data properties. So I want to select a marker and display the data properties underneath the map. Can this be done? I have tried to add listeners to the markers but failed in that.
Regards Richard

[RichDijk]

I think i'll use a link in the hover text or context menu to start context functionality

[falkoschindler]

Hi @RichDijk,

It looks like Leaflet doesn't support click events for markers. But I might be wrong.
Have you found a solution for your application?

[kleynjan]

It looks like Leaflet doesn't support click events for markers.

Hi @falkoschindler: yes, a native Leaflet Marker inherits click from Interactive Layer.

The current "marker" in nicegui hardly deserves to be called that, as it's a small helper around a generic layer object. I do understand that it's too much to ask to implement the entire Leaflet API in Nicegui, though.

To "get to" the parts of the API not exposed in Nicegui, I use a small custom "bridge" between Nicegui and JS, built from these parts:

1. run_javascript(...)
2. in JS: use getElement(id) to find the element, where id is the Nicegui object id
3. find out which property to use to access the embedded JS API object (here: 'map')
4. run JS functions against the specific parts of the API you need
5. and use emitEvent('myevent', ...) (JS) and ui.on('myevent', ...) (python) to send results or events to Nicegui.

Parts 1 & 5 of this recipe are documented, but it did take me quite some time to put the rest together. It think it would be helpful for others to include this information somewhere in the docs. (OR maybe there is already another/better way to do this...?)

Anyway, see below for an example implementation of numbered clickable markers (which I happened to need myself) using this pattern.

Cheers - Peter

[kleynjan]

Edited 13/03/2024, cleaned up code, JS converted to camelCase, demo now deletes clicked marker.

// /static/markers.js

var markers = { 'initialized': false, 'featureGroup': null, 'icon': null };

function initMarkers(mapId) {
    // run after leaflet is loaded
    if ( ! markers.initialized ) {

        var map = getElement(mapId).map;       // see templates/index.html
        // map = window.app.$refs["r" + mapId].map;
        if ( ! map ) {
            console.log('Leaflet map object ' + mapId + ' not found');
            return;
        }  

        // group all markers in featureGroup and add to map
        markers.featureGroup = new L.featureGroup([]);
        map.addLayer(markers.featureGroup);

        // define icon prototype, if necessary modify between adding markers
        // divicon allows html but iconUrl must be set as background-image in css
        markers.icon = L.DivIcon.extend({
            options: {
                className: "number-icon",
                iconSize: [22, 40],
                iconAnchor: [11,40],    // from top-left; add half the width. all of the height
                popupAnchor: [3, -40],
                html: ""
            }
        });

        markers.initialized = true;
    }
}

function handleMarkerClick(e) { 
    // send ix back to Python
    emitEvent('marker-clicked', {'index': e.target._ix});
};

function addMarker(mapId, lat, lng, i, z=0) {
    initMarkers(mapId);

    if ( ! markers.initialized ) {
        console.log('Markers not initialized / Leaflet probably not yet loaded');
        return;
    }

    var iconx = new markers.icon({ html: i });
    var marker = L.marker([lat, lng], {
        icon: iconx,
        zIndexOffset: z
    })
    .addTo( markers.featureGroup )
    .on('click', handleMarkerClick)

    // custom attribute, avoids closure in event handling & selector for deletion
    marker._ix = i;
}

function deleteMarker(i) {
    if ( markers.initialized ) {
        markers.featureGroup.eachLayer(function (layer) {
            if (layer._ix == i) {
                markers.featureGroup.removeLayer(layer);
            }
        }
    )};
}

function deleteAllMarkers() { 
    if ( markers.initialized ) {
        markers.featureGroup.remove();
        markers.featureGroup = new L.featureGroup([]);
    }
}

from nicegui import ui, app

# put markers.js and marker-icon-40x22.png in static folder
app.add_static_files("/static", "static")

css = """
<style>
.number-icon {
    /* please replace by your own marker image, eg, /static/marker-icon-40x22.png! */
    background-image: url("http://peter.kleynjan.nl/css/marker-icon-40x22.png");
    background-size: 22px 40px;
    text-align: center;
    color: white;   
    font-size: 10pt;
    font-weight: 400;
    line-height: 18pt;
})
</style>"""

def handle_marker_click(ev):
    if "index" in ev.args:
        ix = ev.args["index"]
        ui.notify(f"You clicked marker #{ix}")
        ui.run_javascript(f"deleteMarker({ix});")

@ui.page("/")
async def page():
    ui.add_head_html(css)
    ui.add_head_html("<script src='/static/markers.js'></script>")
    ui.on("marker-clicked", handle_marker_click)

    gps = [
        (51.500, -0.09),
        (51.503, -0.08),
        (51.508, -0.07),
        (51.510, -0.06),
    ]

    map = ui.leaflet(center=(51.505, -0.09), zoom=13).style("height: 800px;")
    await map.initialized()

    for ix, r in enumerate(gps):
        ui.run_javascript(f"addMarker({map.id}, {r[0]}, {r[1]}, {ix + 1}, {100 - ix});")

    ui.button("Delete all", on_click=lambda: ui.run_javascript("deleteAllMarkers();"))

ui.run()

Should look like this:

[kyuhyong]

Can you tell me where to put follow_symlink=True in the code?

[kleynjan]

Come on, have you read the link in my answer? It's an optional argument to add_static_files...

[kyuhyong]

I̶ a̶l̶s̶o̶ t̶r̶i̶e̶d̶ t̶o̶ p̶a̶s̶s̶ t̶h̶a̶t̶ a̶r̶g̶u̶m̶e̶n̶t̶ b̶u̶t̶ o̶n̶l̶y̶ g̶o̶t̶ e̶r̶r̶o̶r̶ l̶i̶k̶e̶ "t̶r̶y̶i̶n̶g̶ t̶o̶ p̶a̶s̶s̶ a̶r̶g̶u̶m̶e̶n̶t̶s̶ m̶o̶r̶e̶ t̶h̶a̶n̶ r̶e̶q̶u̶i̶r̶e̶d̶"
Don't know why this piece of code did not work before but now it is working.
app.add_static_files('/static', package_dir, follow_symlink=True)

[kyuhyong]

As mentioned here, #2720 (reply in thread)

pip install --upgrade nicegui

Solved the issue like "add_static_files() got an unexpected keyword argument 'follow_symlink'".

[kleynjan]

Yes, I think it was only added in 1.4.9, so three months ago. One "nice" thing about NiceGUI is that it is still developing rapidly. I'd advise you to update often, as do I.