0

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>

enter image description here

2

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 ...

  • I'am try this option, but in console receive log message "propertyName 'uname' not found in marker" – HasT Dec 17 '14 at 15:04
  • Sorry I overlooked your problem. See my edited answer. The result is not perfect yet – YaFred Dec 17 '14 at 17:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.