0

I'm trying to add a className to a Popup with a function, but when I use a function, the code of the function itself gets returned. What am I doing wrong?

    function popUp(layer){
        return '<div class="d-inline-block border rounded px-1 mb-1"><b>#' + layer.feature.properties.id + '</b></div><h6 class="mb-0">' + layer.feature.properties.address + '</h6>' + 
        '<span class="text-muted d-block mb-2 small">(' + layer.feature.properties.coords + ')</span>' +
        '<span class="d-block">' + layer.feature.properties.subtype + '</span>' +
        '<a href="/report.php?report_id=' + layer.feature.properties.id + '">Go to Report</a>'
    };

    function customClass(layer){
        return layer.feature.properties.subject
    };

    L.geoJSON(points, {
        style: style,
        pointToLayer: function(feature, latlng) {
            return L.circleMarker(latlng, pointStyle);
        },
        onEachFeature: function(feature, layer){
             layer.bindPopup(popUp, {className: customClass})
        }
    }).addTo(map);

This is what is what ends up happening: enter image description here

I am able to do this and get it to work:

className: layer.feature.properties.subject

But if I want to manipulate that value (say putting dashes where the spaces are), I don't know what to do

|improve this question
1

You just need to pass function call for className, not function definition, when binding popup to layer:

onEachFeature: function(feature, layer){
    layer.bindPopup(popUp, {className: customClass(layer)})
}
|improve this answer
  • Wow, haha thank you so much. Would you happen to know why popUp doesn't require you to pass parameters through? I think the fact that that function was working, while customClass wasn't, was throwing me off. – IHIutch Dec 26 '18 at 14:35
  • Because bindPopup method is defined in such a way that it passes layer as first argumnet in function call (see documentation: leafletjs.com/reference-1.3.4.html#layer-bindpopup). – TomazicM Dec 26 '18 at 15:14

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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