CODEWITHSUNDEEP
leaflet
neubert
neubert

Reputation: 16792

popupopen event handler runs before popup actualy opens

Consider this code:

    L.marker({lat: 30.267222, lon: -97.743056})
        .addTo(mymap)
        .bindPopup("hello world!")
    .on('popupopen', function(e) { alert('this far'); });

When I run it the alert() runs before the popup actually appears. Is there a way to make it so that some javascript code runs after the popup appears?

I ask because I'm trying to run some javascript after the popup appears that'd do stuff to the visible elements. If the popup isn't open when the popupopen event handler runs then that javascript clearly won't work.

Any ideas?

JS Fiddle: https://jsfiddle.net/7qn2dksb/

Thanks!

Upvotes: 0

Views: 97

Answers (1)

kboul
kboul

Reputation: 14570

What about using a short delay using setTimeout?

 L.marker({
        lat: 30.267222,
        lon: -97.743056
      })
      .addTo(mymap)
      .bindPopup("hello world!")
      .on('popupopen', function(e) {
        setTimeout(() => {
          alert('this far');
        }, 100)
      });


<!DOCTYPE html>
<html>

<head>

  <title>Quick Start - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>



</head>

<body>



  <div id="mapid" style="width: 100%; height: 100vh"></div>
  <script>
    var mymap = L.map('mapid').setView({
      lat: 30.267222,
      lon: -97.743056
    }, 13);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      id: 'mapbox/streets-v11',
      tileSize: 512,
      zoomOffset: -1
    }).addTo(mymap);




    L.marker({
        lat: 30.267222,
        lon: -97.743056
      })
      .addTo(mymap)
      .bindPopup("hello world!")
      .on('popupopen', function(e) {
        setTimeout(() => {
          alert('this far');
        }, 100)
      });
  </script>



</body>

</html>

Upvotes: 1

Related Questions