Leaflet event flow

by Stefano

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<div id="map" style="height: 500px"></div>

JavaScript

var map = L.map('map');
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

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('click', (e) => {
    console.log('layer:click1')
    // this does not work...
    L.DomEvent.stopPropagation(e)
    L.DomEvent.preventDefault(e)
    e.originalEvent.stopPropagation()
    e.originalEvent.preventDefault()
  })
  .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>
  `)
  .on('click', () => console.log('layer:click2'))
  .on('popupopen', () => console.log('layer:popup.open'))
  .on('popupclose', () => console.log('layer:popup.close'))
  .addTo(map)

map
  .on('click', () => console.log('map:click'))
  .on('popupopen', () => console.log('map:popup.open'))
  .on('popupclose', () => console.log('map:popup.close'))
  .fitBounds(geojsonLayer.getBounds())