CODEWITHSUNDEEP
javascriptevent-handlingmapsmapboxdom-events
four-eyes
four-eyes

Reputation: 12385

Stop Event Propagation of Mapbox Layers

I have one layer and a basemap

mapboxgl.accessToken = '';

const coords = JSON.parse('{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[13.380550656438709,52.52208508665396]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[13.380633221743006,52.52208172104466]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[13.380686171093972,52.52208244564463]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[13.380702060621635,52.5220511942754]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[13.380527236009051,52.52205779286111]}}]}');

this.map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v9',
  zoom: 19, // starting zoom
  center: [13.380702060621635, 52.5220511942754]
});

this.map.on('load', async () => {
  const controls = new mapboxgl.NavigationControl();
  this.map.addControl(controls, 'top-right');

  this.map.addSource('foo', {
    type: 'geojson',
    data: coords
  });

  this.map.addLayer({
    id: 'points',
    type: 'circle',
    source: 'foo',
    paint: {
      'circle-radius': 5,
      'circle-color': 'hotpink',
    },
  });
});

this.map.on('click', 'points', event => {
  console.log('Layer click')
});

this.map.on('click', () => {
  console.log('Basemap click')
});

body { 
  margin: 0; 
  padding: 0; 
}

#map { 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  width: 100%; 
}

#sidebar {
  background-color: hotpink;
  height: 100vh;
  width: 200px;
  position: relative;
  z-index: 99999999999;
  opacity: 0.5;
}

.popup-content {
  display: inline-block
}

.pin-icon {
  font-size: 20px;
  color: blue
}

.vl {
  border-left: 1px solid #bababa;
  height: 15px;
  padding: 0px;
  margin: 10px;
}

<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-;scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>

<div id='map'></div>
</body>
</html>

https://codepen.io/diesdasananas/pen/eqVLyj

Whenever I click on the circle layer, the event propagates through the basemap. Basemap click gets logged. I wonder how do I stop event propagation from the circle layer to the basemap? I cannto use event.stopPropagation() because Mapbox draws on the canvas...

Upvotes: 5

Views: 2968

Answers (1)

four-eyes
four-eyes

Reputation: 12385

One approach is to save the event coordinates of the click on the layer and then compare these coordinates with the underlying layer and its event coordinates.

let clickCoords = {};

this.map.on('click', 'points', event => {
  clickCoords = event.point;
  console.log('Layer click')
});

Now, detect a click on the map, not on the points layer

this.map.on('click', () => {
  // check if coords are different, if they are different, execute whatever you need
  if (clickCoords.x !== event.point.x && clickCoords.y !== event.point.y) {
    console.log('Basemap click');
    clickCoords = {};
  }
});

Or, even better, use queryRenderedFeatures().

this.map.on('click', event => {
   if (this.map.queryRenderedFeatures(event.point).filter(feature => feature.source === YOURLAYERNAME).length === 0) {
    console.log('Basemap click');
  }
});

Here is a Mapbox example.

Upvotes: 4

Related Questions