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})

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

1 Answer 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)})
  • 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, 2018 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, 2018 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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