0

I created this custom popup at a fixed position. When clicking a marker a popup opens, I'm able to close the popup and open another one clicking a different marker, then I'm not able to close the popup. The popup wrapper remains open and only changes it's content when clicked on a different marker? The eventListener works partially. Need that piece of code that does the job.

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

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('wrapper');
        var wrap = getWrap.appendChild(document.createElement('div'));
        wrap.className = 'wrapper';
        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>`;

            document.querySelector('.close').addEventListener( 'click', 
            closePopup);
            function closePopup(e){

              if(event.target === 'close'){
                  document.querySelector(".wrapper").style.display='none'
              }else 
     if(document.querySelector(".wrapper").style.display='block'){
                  document.querySelector(".wrapper").style.display='none';
                 }
              }
           }
       });
   }

});

mymap.addLayer(myLayer)
0

I found the answer. It is how you construct your dynamically generated DOM element, wich in this case is the popup. Create one empty div with id="popup" in the div with id="mapid" in your HTML file. The rest is generated dynamically. The if statement of the eventlistener only needs that block of code necessary when a condition is true.

const element = document.getElementById('popup');

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

// the eventListener

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

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.