0

I created a custom popup at a fixed position on a Leaflet map. When clicking a marker i'm able to close the popup and open another one by clicking a different marker. However, when I don't close the popup by clicking the close button and instead click another marker the popup content changes but I'm no longer able to close the popup by clicking the close button, it is stuck. How to solve this?

// Custom marker

var redFlag = L.icon({
   iconUrl: 'images/mapmarker2.png',
   iconSize: [34, 34],
   iconAnchor: [17,34]
});

//geoJSON data, stored in 'art' variable  

const myLayer = L.geoJSON(art, {
    pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {icon: redFlag});

},
onEachFeature: function ( feature, layer) {
    layer.on('click', function(e){

        var getWrap = document.getElementById('mapid');
        var wrap = getWrap.appendChild(document.createElement('div'));
        wrap.className = 'wrapper';
        wrap.style.backgroundColor = '#fff';
        wrap.innerHTML =  
        `<div class="close">X</div>`+ 
        `<div class="popUpContent" style="background-color:#e8f4ff">` +
        `<div class='pic'><img src = 
         "images/${feature.properties.image}"></div>`+ 
        `<div class="puName"><span 
         class="puName">${feature.properties.name}</span><br>`+
        `<span class="puTitle">"${feature.properties.title}"</span> <br>`+ 
        `<div class="extra3">${feature.properties.extra}</div></div>`+ 
        `</div>`;

    if(!feature.properties.title){

       wrap.innerHTML =  
        `<div class="close">X</div>`+
        `<div class="popUpContent" style="background-color:#e8f4ff">` +
        `<div class='pic'><img src = 
         "images/${feature.properties.image}"></div>`+ 
        `<div class="puName"><span 
         class="puName">${feature.properties.name}</span><br>`+ 
        `<div class="extra3">${feature.properties.extra}</div></div>`+ 
        `</div>`;

        }

         // EventListener attached to close button

  document.querySelector('.close').addEventListener('click', closePopup);
          function closePopup(e){
      if(document.querySelector('.wrapper').style.display = 'block'){
          document.querySelector('.wrapper').remove();
                }
             }

         });
     }

 });

 mymap.addLayer(myLayer)
kboul
  • 13,836
  • 5
  • 42
  • 53
Noud
  • 55
  • 9
  • 3
    Is `L.Popup` involved at all? If not, then the title is misleading. – IvanSanchez May 27 '19 at 12:48
  • https://stackoverflow.com/a/56295702/5108796 looked like a valid answer. Do not duplicate your question, but _edit_ your previous one to add more details and have it bumped to top of active list. – ghybs May 27 '19 at 13:02
  • L.Popup is not involved.I created a custom popup at fixed position. Attached an eventListener to the close button. Which is obviously not doing what I want. I'm a javascript beginner stuck at something silly like closing a popup. Please help. – Noud May 27 '19 at 15:12

0 Answers0