4

I would like to set my popup content. Some of the information will be condition-based. I tried the following options:

 onEachFeature: function (pointFeature, layer) {
   var stream = function(liveStr){
     if (pointFeature.properties.Stream === 1) {
       innerHTML = "<p class='webcam_refresh'> Live Stream </p>"
     } else {
      "<p class='webcam_refresh'> Image refresh </p>"
     }
     return liveStr
    };
  var popupContent = L.popup({
  className: 'map-popup',
  }).setContent(
  "<p><h2 class='webcam_location'>" + pointFeature.properties.Location + "</h2></p>" +
  "<h4 class='webcam_provider'>" + pointFeature.properties.Provider + "</h4>" +
  "<iframe src=" + pointFeature.properties.Link + "'&output=embed'height='200' width='300' 
  title='camera thumbnail'></iframe>" + 
 "<b class='popup_category'>Rotation:</b>" + pointFeature.properties.Rotation + stream()
 );
 layer.bindPopup(popupContent);
 }
 }).addTo(map);

But as a result, I get only undefined value.

Second time I tried something like this:

  onEachFeature: function (pointFeature, layer) {
  var stream = pointFeature.properties.Stream;
    if (pointFeature.properties.Stream === 1) {
      innerHTML = "<p class='webcam_refresh'> Live Stream </p>"
    } else {
      "<p class='webcam_refresh'> Image refresh </p>"
    }
   var popupContent = L.popup({
   className: 'map-popup',
   }).setContent(
   "<p><h2 class='webcam_location'>" + pointFeature.properties.Location + "</h2></p>" +
   "<h4 class='webcam_provider'>" + pointFeature.properties.Provider + "</h4>" +
   "<iframe src=" + pointFeature.properties.Link + "'&output=embed'height='200' width='300' 
   title='camera thumbnail'></iframe>" + 
   "<b class='popup_category'>Rotation:</b>" + pointFeature.properties.Rotation + stream
   );
   layer.bindPopup(popupContent);
   }
   }).addTo(map);

Neither first nor second example brought the desired effect.

enter image description here

How can I define function or variable inside the variable describing the popup in Leaflet?

4
  • What exactly is the result you desire? for example: ... overnight 1? Could you give an example? Nov 22 '21 at 21:01
  • No, it must be Overnight and if its 1 then "Live Stream" if its 0 then "Camera refresh".
    – MKR
    Nov 23 '21 at 9:06
  • Do you mean that if it's 1 then ROTATION: Except overnight Live Stream, if it's 0 then ROTATION: Except overnight Camera refresh? What if it's undefined? Nov 23 '21 at 9:16
  • Yes, I did mean exactly this stuff. Undefined means, that the code couldn't read my function properly.
    – MKR
    Nov 23 '21 at 10:18
6

You missed innerHTML in else, and you should change + stream to + innerHTML in setContent. Use this:

onEachFeature: function (pointFeature, layer) {
    var stream = pointFeature.properties.Stream;
    var innerHTML;
    if (stream == 1) {innerHTML = "<p class='webcam_refresh'> Live Stream </p>";}
    else { innerHTML = "<p class='webcam_refresh'> Image refresh </p>"; }


    var popupContent = L.popup({
      className: 'map-popup',
    }).setContent(
      "<p><h2 class='webcam_location'>" + pointFeature.properties.Location + "</h2></p>" +
      "<h4 class='webcam_provider'>" + pointFeature.properties.Provider + "</h4>" +
      "<iframe src=" + pointFeature.properties.Link + "'& output=embed'height='200' width='300' title = 'camera thumbnail' ></iframe > " +
      "<b class='popup_category'>Rotation: </b>" + pointFeature.properties.Rotation + innerHTML
    );
    layer.bindPopup(popupContent);
  }
}).addTo(map);

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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