Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to check if leaflet popup is open?

Tags:

jquery

leaflet

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
}
like image 714
Pepe Avatar asked Oct 19 '25 18:10

Pepe


2 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/

like image 110
treecon Avatar answered Oct 22 '25 08:10

treecon


.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/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/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>
like image 37
pilchard Avatar answered Oct 22 '25 09:10

pilchard