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