I would like to set up my pop-up content based at conditional statement. I've got two approaches behind myself, none of them was working so far.
The first one:
onEachFeature: function (pointFeature, layer) {
function Stream() {
if (pointFeature.properties.Stream = 1) {
"<p> Live Stream </p>"
} else { "<p> Image refresh </p>"}
}
var popupContent = "<p><h2 class='webcam_location'>" +
pointFeature.properties.Location + "</h2></p>" +
"<h4 class='webcam_provider'>" + pointFeature.properties.Provider + "</h4>" +
"<iframe src='" + pointFeature.properties.Link + "' height='200' width='300' title='camera
thumbnail'></iframe>" +
Stream()
};
layer.bindPopup(popupContent);
}
The second one:
onEachFeature: function (pointFeature, layer) {
var popupContent = "<p><h2 class='webcam_location'>" +
pointFeature.properties.Location + "</h2></p>" +
"<h4 class='webcam_provider'>" + pointFeature.properties.Provider + "</h4>" +
"<iframe src='" + pointFeature.properties.Link + "' height='200' width='300' title='camera
thumbnail'></iframe>" +
if (pointFeature.properties.Stream = 1) {
"<p> Live Stream </p>"
} else { "<p> Image refresh </p>"}
};
layer.bindPopup(popupContent);
with an error in the console:
SyntaxError: Unexpected token 'if'
How can I place if statement inside the existing function?
Replace the concatenation with template literal syntax and use a separate concatenation for your conditional text.
Like so:
UPDATE: Based upon your comments, I've amended the solution to more closely match your provided fiddle.
This should be close enough for you to adapt.
First, save the popup content and the conditional content to variables. Build the string with the variables needed, including the conditional content. Then use that single variable (popUpContent) as the content to add to the popup.
onEachFeature: function(pointFeature, layer) {
const stream = pointFeature.properties.Stream;
let popUpConditionalContent;
if (stream === 1) {
popUpConditionalContent = "<p class='webcam_refresh'> Live Stream </p>"
} else {
popUpConditionalContent = "<p class='webcam_refresh'> Image refresh </p>"
}
const popUpContent = `<p><h2 class='webcam_location'>
${pointFeature.properties.Location}</h2></p>
<h4 class='webcam_provider'>${pointFeature.properties.Provider}</h4>
<iframe src='${pointFeature.properties.Link}' height='200' width='300' title='camera
thumbnail '></iframe>${popUpConditionalContent}<b class='popup_category'>Rotation:</b>${pointFeature.properties.Rotation}${stream}`;
var popUp = L.popup({
className: 'map-popup',
}).setContent(popUpContent);
layer.bindPopup(popUp);
}