I am building a tool allowing to edit some GeoJSON props on a popup opened over the GeoJSON element/layer. When the popup is closed the props are shown in a fixed tooltip over the polygon. However, the popup always opens and closes even if the popup is already open. Is there a way to prevent that? In other words, is there a way for the GeoJSON layer to ignore a click event on the polygon if the popup is already open?
var geojson = { "type": "Feature", "properties": {"name":"my poly"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ -0.11810302734375, 51.57706953722565 ], [ -0.29937744140625, 51.469407923261336 ], [ 0.098876953125, 51.354631230360226 ], [ 0.17303466796874997, 51.50190410761811 ], [ -0.11810302734375, 51.57706953722565 ] ] ] } };
var geojsonLayer = new L.GeoJSON(geojson);
geojsonLayer
.on('popupopen', (e) => {
geojsonLayer.closeTooltip();
geojsonLayer.getPopup().setLatLng(
geojsonLayer.getBounds().getCenter()
);
})
.on('popupclose', (e) => {
geojsonLayer.openTooltip();
})
.bindTooltip((layer) => `Name: <b>${layer.feature.properties.name}</b>`, {
permanent: true,
interactive: false,
direction: 'center',
})
.bindPopup((layer) => `
<form>
<h3>Edit</h3>
<input type="text" value="${layer.feature.properties.name}" />
</form>
`)
.addTo(map)
map
.fitBounds(geojsonLayer.getBounds())