Binding each layer marker to feature - help!

[helotrix]

Hello!

I'm really struggling here, not helped by my sorry lack of Javascript knowledge. I wonder if you can help?

I have created the map, added markers with pop-ups, added the search control and that is all working. I am getting search results in the RHS pane.

But I can not find a way to bind the layer to each marker.

Here's the script:

    var map = L.map('map').setView([50.85,0.55], 6);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'mapbox.light'
    }).addTo(map);

    var searchCtrl = L.control.fuseSearch()
    searchCtrl.addTo(map);

    function onEachFeature(feature, layer) {

        var popupContent = '<table><tr><th scope="row">Company</th><td>' + Autolinker.link(String(feature.properties['CompanyName'])) + '</td></tr><tr><th scope="row">Address 1</th><td>' + Autolinker.link(String(feature.properties['Address1'])) + '</td></tr><tr><th scope="row">Address 2</th><td>' + Autolinker.link(String(feature.properties['Address2'])) + '</td></tr><tr><th scope="row">Address 3</th><td>' + Autolinker.link(String(feature.properties['Address3'])) + '</td></tr><tr><th scope="row">Address 4</th><td>' + Autolinker.link(String(feature.properties['Address4'])) + '</td></tr><tr><th scope="row">Address 5</th><td>' + Autolinker.link(String(feature.properties['Address5'])) + '</td></tr><tr><th scope="row">County</th><td>' + Autolinker.link(String(feature.properties['County'])) + '</td></tr><tr><th scope="row">Country If Not UK</th><td>' + Autolinker.link(String(feature.properties['CountryIfNotUK'])) + '</td></tr><tr><th scope="row">Postcode</th><td>' + Autolinker.link(String(feature.properties['Postcode'])) + '</td></tr><tr><th scope="row">Telephone</th><td>' + Autolinker.link(String(feature.properties['Telephone'])) + '</td></tr><tr><th scope="row">Fax</th><td>' + Autolinker.link(String(feature.properties['Fax'])) + '</td></tr><tr><th scope="row">Email</th><td>' + Autolinker.link(String(feature.properties['Email'])) + '</td></tr><tr><th scope="row">Web</th><td>' + Autolinker.link(String(feature.properties['Web'])) + '</td></tr></table>';
        if (feature.properties && feature.properties.popupContent) {
            popupContent += feature.properties.popupContent;
        }
        layer.bindPopup(popupContent);

    }

    L.geoJson([abc], {

        style: function (feature) {
            return feature.properties && feature.properties.style;
        },

        onEachFeature: onEachFeature,
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, {
                radius: 8,
                fillColor: "#ff7800",
                color: "#000",
                weight: 1,
                opacity: 1,
                fillOpacity: 0.8
            });
        }
    }).addTo(map);
    searchCtrl.indexFeatures(abc.features, ['CompanyName', 'County']);

I've read the ReadMe and I see that I have to use:

    feature.layer = layer;

But try as I might I just can not get it to work. What am I missing?

Thank you.

[naomap]

Hi. Did you try to put the line "feature.layer = layer;" in the function onEachFeature() for instance ? That should do the trick. Antoine.

[naomap]

I assume you solved your problem. Please reopen with more details if that is not the case.

[mikelayesta]

Hello, I have the same problem like helotrix. When I search the feature, it appears in the container but it doesn't connect whith the popup of the feature...

I put "feature.layer = layer;" before the "searchCtrl.indexFeatures" like in the example and I have the error "ReferenceError: feature is not defined". If I put the reference in the onEachFeature() function, I don't have any error, but the plugin doesn't run.

Excuse me for my English.

Thank you,

Mikel

This is the code:

    function pop_lorazaintzaguneak(feature, layer) {
        var popupContent = '<table><tr><th scope="row">IZENA</th><td>' + Autolinker.link(String(feature.properties['IZENA']))
        + '</td></tr><tr><th scope="row">AZALERA</th><td>' + Autolinker.link(String(feature.properties['Azalera'])) </tr></table>';
        layer.bindPopup(popupContent);          
    }

    function doStylelorazaintzaguneak(feature) {
        return {
            weight: 1.04,
            color: '#5fb404',
            fillColor: '#a5df00',
            dashArray: '',
            opacity: 1.0,
            fillOpacity: 0.6
        };
    }
        var json_lorazaintzaguneakJSON = new L.geoJson(json_lorazaintzaguneak, {
            onEachFeature: pop_lorazaintzaguneak,
            style: doStylelorazaintzaguneak
        });
        layerOrder[layerOrder.length] = json_lorazaintzaguneakJSON;
    layerOrder[layerOrder.length] = json_lorazaintzaguneakJSON;
    for (index = 0; index < layerOrder.length; index++) {
        feature_group.removeLayer(layerOrder[index]); feature_group.addLayer(layerOrder[index]);
    }
    bounds_group.addLayer(json_lorazaintzaguneakJSON);
    feature_group.addLayer(json_lorazaintzaguneakJSON);

    var searchCtrl = L.control.fuseSearch({
        position: 'topleft',
        panelTitle: 'Bilaketa emaitza',
        showResultFct: function(feature, container) {
            props = feature.properties;
            var name = L.DomUtil.create('b', null, container);
            name.innerHTML = props.IZENA;
            container.appendChild(L.DomUtil.create('br', null, container));
            container.appendChild(document.createTextNode(props.Azalera));
        }
    });
    searchCtrl.addTo(map);
    searchCtrl.indexFeatures(json_lorazaintzaguneak, ['IZENA', 'Azalera']);     
    feature.layer = json_lorazaintzaguneakJSON;

[naomap]

You need to bind the layer to the feature for each individual feature, for instance in your function pop_lorazaintzaguneak() :

function pop_lorazaintzaguneak(feature, layer) {
    ../..
    layer.bindPopup(popupContent);          
    feature.layer = layer;
}