[GIS] Add ‘name’ from GeoJSON to Leaflet List Markers control

Question

Im my web app I use Leaflet List Markers plugin (https://github.com/stefanocudini/leaflet-list-markers). Markers loaded as GeoJSON from GeoServer. I want dispaly name of markers in list control, but unsuccessfully. Please, help me add name of markers in list control.

Example code:

    <script>
    var map = L.map('map', {
        center: [50.0669, 35.1638],
        zoom: 15
    });

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; Map Data <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var Markerlayer = L.geoJson(null, {
        pointToLayer: function(feature, latlng) {
            return L.marker(latlng, {});

        },
        onEachFeature: function(feature, layerinfo) {
            if (feature.properties) {
                var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Id</th><td>" + feature.properties.gid + "</td></tr>" + "<tr><th>Name</th><td>" + feature.properties.uname + "<table>";

                layerinfo.bindPopup(content, {
                    closeButton: true
                });
            }
        }
    });

    $.getJSON("http://localhost:8080/geoserver/krasnokutsk/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=krasnokutsk:usptemp&maxFeatures=50&outputFormat=application/json", function(data) {
        Markerlayer.addData(data);
    });
    Markerlayer.addTo(map);

    var list = new L.Control.ListMarkers({
        layer: Markerlayer,
        label: 'title',
        itemIcon: L.Icon.Default.imagePath + '/marker-icon.png',
        maxZoom: 18
    });

    list.on('item-mouseover', function(e) {
        e.layer.setIcon(L.icon({
            iconUrl: 'assets/select-marker.png'
        }))
    }).on('item-mouseout', function(e) {
        e.layer.setIcon(L.icon({
            iconUrl: L.Icon.Default.imagePath + '/marker-icon.png'
        }))
    });


    map.addControl(list);
</script>

Answer 1

If you edit your code this way, it works (note the ADDED line)

   var Markerlayer = L.geoJson(null, {
        pointToLayer: function(feature, latlng) {
            marker = L.marker(latlng, {});
            marker.options['title'] = feature.properties['uname']; // ADDED
            return marker;

        },
        onEachFeature: function(feature, layerinfo) {
            if (feature.properties) {
                var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Id</th><td>" + feature.properties.gid + "</td></tr>" + "<tr><th>Name</th><td>" + feature.properties.uname + "<table>";

                layerinfo.bindPopup(content, {
                    closeButton: true
                });
            }
        }
    });

However, you have to refresh the map (move it a bit) to see the list ...