0

What I'm trying to do is have a popup box when you click on a marker on the leaflet map. In this popup box are five elements present.

  1. Title
  2. Description
  3. Image
  4. Button (Next Image)
  5. Button (Previous Image)

So what I tried to do was add a custom pop which for each feature:

    onEachFeature: function(feature, layer) {
  layer.bindPopup(insertDataPopUp(feature), customPopUpOptions);
}

But in my pop up settings when I call a onclick function in my HTML, the function is not recognized. So what I'm trying to do if someone clicks the next image button a new image is displayed. But the issue right now is that the function in the HTML is not found....

Here is the code for the popup where the issue lies:

function insertDataPopUp(feature) {
        if (feature.properties.pictures != null) {
          var picturePath = feature.properties.pictures[0];
          var picture = "<img id='popupFoto' src=" + picturePath + " alt=''/>";
        } else {
          picture = "";
        }
        var customPopup =
          "<div id='infoBox'><h2>" +
          feature.properties.name +
          "</h2><p>" +
          feature.properties.description +
          "</p>" +
          picture +
          '<button onclick="nextFoto()">Back</button> <button onclick="nextFoto()">Forward</button></div>';

        return customPopup;
      }

I'm using leaflet, javascript and the vue framework.

ShadowRock
  • 105
  • 13
  • You can find the answer here [Click link inside Leaflet Popup and do Javascript](https://stackoverflow.com/questions/13698975/click-link-inside-leaflet-popup-and-do-javascript) – luishromero Apr 16 '20 at 23:51
  • Found the solution right here! https://stackoverflow.com/questions/42599445/adding-buttons-inside-leaflet-popup – ShadowRock Apr 20 '20 at 07:39

1 Answers1

1

I fixed this by using DOM elements. The answer can be found here:

Adding buttons inside Leaflet popup

ShadowRock
  • 105
  • 13