How to check if leaflet popup is open?

user_4399382 0
Viewed 3427

How can I check, if a leaflet popup is open?

I have seen, that there is an .isOpen event in the documentation (methods), but I am not so familiar with the integration of it. I tried something (horrible) like this:

var marker = L.popup();

if($(marker).isOpen) {
// do something
}
else {
// do nothing
}
leaflet jquery
4 Answers

Use .isOpen() method which returns a boolean.

var myPopup = L.popup();
...
if (myPopup.isOpen()) {
   ...
}

Check this fiddle. The .isOpen() method works as expected.

https://jsfiddle.net/73ozvb5s/

user_75121140

.isOpen() and .isPopupOpen() are both Leaflet native methods for determining whether a popup is open.

.isOpen() is called on a popup directly.

// isOpen()
var popup = L.popup();
if(popup.isOpen()) {
// do something
}
else {
// do nothing
}

.isPopupOpen() is called on a layer to which a popup has been bound and returns the status of the bound popup.

// isPopupOpen()
var popup = L.popup();
var marker = L.marker().bindPopup(popup);
if(marker.isPopupOpen()) {
// do something
}
else {
// do nothing
}

(edited User863's snippet to illustrate)

var map = L.map('Lmap').setView([60, 10], 10);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  fadeAnimation: false,
  zoomAnimation: false,
  markerZoomAnimation: false,
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

var popup = L.popup()
  .setContent('<p>Hello world!<br />This is a nice popup.</p>');
var marker = L.marker([60, 10])
  .addTo(map)
  .bindPopup(popup);

function checkPopup() {
  document.getElementById('popup-status').innerHTML = popup.isOpen()
}

function checkBoundPopup() {
  document.getElementById('bound-popup-status').innerHTML = marker.isPopupOpen()
}
#Lmap {
  position: absolute;
  top: 35px;
  left: 0;
  width: 100%;
  height: 80%
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

<div id="Lmap"></div>

<button onclick="checkBoundPopup()">marker.isPopupOpen()</button>
<span id="bound-popup-status"></span>

<button onclick="checkPopup()">popup.isOpen()</button>
<span id="popup-status"></span>

user_137623010

Can you try

var marker = L.popup();
if(marker.isOpen()) {
// do something
}
else {
// do nothing
}
user_116030040

Try using isPopupOpen() method

var map = L.map('Lmap').setView([60, 10], 10);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  fadeAnimation: false,
  zoomAnimation: false,
  markerZoomAnimation: false,
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

var marker = L.marker([60, 10])
  .addTo(map)
  .bindPopup('<p>Hello world!<br />This is a nice popup.</p>');

function checkPopop() {
  document.getElementById('popup-status').innerHTML = marker.isPopupOpen()
}
#Lmap {
  position: absolute;
  top: 35px;
  left: 0;
  width: 100%;
  height: 80%
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

<div id="Lmap"></div>

<button onclick="checkPopop()">check</button>
<span id="popup-status"></span>

user_80532740
Related