Disable other events with other layers on map while drawing new polygon

[SamG92]

Hello,

I'm using mapbox-gl-draw with maplibre. I use the following code:

maplibre = new maplibregl.Map({
    container: carte.value,
    style: etalab,
    center: [-1.5558731878137084, 47.218394135080096], // Nantes
    zoom: 14,
  });
var draw = new MapboxDraw({
    displayControlsDefault: false,
    // Select which mapbox-gl-draw control buttons to add to the map.
    controls: {
      polygon: true,
      trash: true
    }
});
maplibre.addControl(draw);
maplibre.on('draw.create', (e) => {
    if (shapelibre?.id) draw.delete(shapelibre.id)
    const data = draw.getAll();
    if (data.features.length > 0) {
      shapelibre = data.features[0]
      maj(shapelibre);
    }
  });
maplibre.on('draw.delete', (e) => {
    maj();
  });

Later on, I add some geojson shapes (layers) on the map and have some events (hover, click) when the user interacts with them:

 maplibre.addSource('mylayer', {
    'type': 'geojson',
    'data': mydata,
    'promoteId': "id"
  });

  maplibre.addLayer({
    'id': 'mylayer-fill',
    'type': 'fill',
    'source': 'mylayer',
...
})
maplibre.on('mousemove', 'parcellesnew-fill', (e) => {
    maplibre.getCanvas().style.cursor = 'pointer';
    if (e.features.length === 0) return;
    ...
  });

When I draw a polygon with mapbox-draw-gl, all events with those geojson shapes get fired and interfere with the polygon drawing.

How can I avoid that?

Thanks a lot Samuel

[tordans]

I think you should either…

• unsubscribe the map events when you start the actions that should not trigger them
• keep the map events but don't do anything by adding a guard "return if i in progress of doing things that should not fire those events"

I don't thinks this is a mapbox-gl-draw issue (aka bug or feature request) but an implementation question.

[SamG92]

Thanks a lot, I will go for a guard. For information, I'm transitioning from a leaflet-pm solution and the default behavior was to stop all other events while drawing.