1

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?

Demo fiddle

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())
5
  • Cross-posted as stackoverflow.com/q/73452308/820534
    – PolyGeo
    Aug 29, 2022 at 1:22
  • 2
    Coding question on GIS SE site should include relevant existing code. Please edit your question and add relevant existing code.
    – TomazicM
    Aug 29, 2022 at 6:49
  • @TomazicMI linked a jsfiddle in my question, is that not ok?
    – Stefano
    Aug 29, 2022 at 16:12
  • 2
    Q/A on GIS SE site are not intended only to solve problem of particular user, but be helpful resource for anybody with similar questions/problems. That's the reason question has to be complete in itself and include all relevant code as text, since outside links tend to get lost in time and also that there is no need to visit other sites to get complete picture of what the problem/question is. Also reduce your question to only one question (now you have three), otherwise it will stay closed and won't be eligible for answers.
    – TomazicM
    Aug 29, 2022 at 17:24
  • @TomazicM I edited the question, thanks for the clarification
    – Stefano
    Aug 29, 2022 at 20:34

1 Answer 1

0

One possible way to achieve desired behavior would be to create stand alone popup and then on feature click event fill it with content, put it to the right place and show on the map.

To avoid flickering popup option closeOnClick: false has to be used and on map click event popup has to be closed.

Code could then look something like this:

var popup = L.popup({
  closeOnClick: false
});

const geojsonLayer = L.geoJSON(geojson, {
  onEachFeature: (f, l) => {
    l.on('click', (e) => {
      L.DomEvent.stopPropagation(e);
      popup.setLatLng(
        geojsonLayer.getBounds().getCenter()
      );
      popup.setContent(
        `<form>
           <h3>Edit</h3>
           <input type="text" value=` + f.properties.name + ` />
         </form>`
      );
      popup.openOn(map);
    });
  }
});

map.on('click', (e) => {
  map.closePopup();
});2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.