Call a function on popup's close icon click-CodePudding

I use OSM maps with

CodePudding user response：

Yes there is way, by Inspecting HTML you can get the class name of the close button that appearng here and you can write following code to do what you want.

document.getElementsByClassName('leaflet-popup-close-button')[0].onclick = () => {
    //alert("test");
    //write code...
}

In the case of their quick start example here : https://leafletjs.com/examples/quick-start/ it was leaflet-popup-close-button Ofcouse the library using same classes.

Thanks.

CodePudding user response：

This can be resolved like this, for example:

// config map
let config = {
  minZoom: 7,
  maxZoom: 18,
};
// magnification with which the map will start
const zoom = 18;
// co-ordinates
const lat = 52.22977;
const lng = 21.01178;

// calling map
const map = L.map("map", config).setView([lat, lng], zoom);

// Used to load and display tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

// one marker
L.marker([52.22983, 21.011728]).addTo(map).bindPopup("Center Warsaw");

function onMapClick(e) {
  const closeButton = e.popup._closeButton;
  closeButton.addEventListener("click", () => {
    alert("ok");
  });

  map.off("popupclose");
}

map.on("popupclose", onMapClick);

*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body,
html,
#map {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

<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="map"></div>