Clever Geek Handbook

How can I prevent pop-up display by clicking on the marker in the "Leaflet"?

I want the popup not to show when I click on the sheet. I cannot use clickable : false

because I will make the markers "act as part of the basemap" and this is not acceptable to me. I have tried the following code

marker.on('click', function(event) {
  event.originalEvent.preventDefault();
});

without any results. What is the correct way to prevent popup display without using clickable : false

the marker object property .

Edit 1: All I need is to open all the popus on the map by clicking one custom button, but I don't want the popup to show up after clicking on a specific marker

+3


source to share


5 answers


Just don't bind the popup to the marker. Here's a fiddle with two markers. One has a popup and the other doesn't.

L.marker([51, 0]).bindPopup("this is a popup").addTo(map);

L.marker([51, 1.5]).addTo(map);


EDIT: I edited the fiddle and think this might be what you are asking for. Here's the important piece of code:

function onClick(event) {
    event.target.closePopup();
}
+3


source


Try a workaround:

marker.bindPopup('my popup content');

// remove openPopup click handler (actually all click handlers)
marker.off('click');

// Do nothing on click. This is not necessary, but now marker
// doesn't act like part of underlying map
marker.on('click', function() {return;});


See plunker for details .

+2


source


None of the other answers worked for me (possibly due to the newer version of Leaflet). I ended up skipping marker.bindPopup()

and just creating the popups separately using L.popup()

and then calling map.openPopup(thePopup)

when I needed them to appear.

Something like that:

var map = L.map(),
    popup = L.popup().setContent("Stuff"),
    marker = L.marker();
popup.setLatLng(marker.getLatLng());

// In my event handler
map.openPopup(popup);
+1


source


Juste remove openPopup

from the marker click event.

marker.bindPopup('My popup!');
marker.off('click', this.openPopup);
0


source


add return false. it should work. although I'm not very sure.

marker.on('click', function(event) {
  event.originalEvent.preventDefault();
  return false;
});
-1


source






More articles:


All Articles