leaflet stop propagation

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', {
  closePopupOnClick: false,
})

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)

map
  .on('click', (e) => {
    console.log('map:click')
    if (geojsonLayer.isPopupOpen()) {
       geojsonLayer.closePopup()
    } else {
      new L.marker(e.latlng).addTo(map);  
    }
  })
  .fitBounds(geojsonLayer.getBounds())

geojsonLayer
  .on('click', (e) => console.log('layer:click'))
  .bindPopup('the popup')
  .addTo(map)