maplibre-gl-leaflet treating drag as click

Question

I have a vector tile set that I need to display as part of an existing Leaflet based application, and so I am using maplibre-gl-leaflet to render the vector data. I also need to attach a handler that can access the properties of an individual feature when it is clicked on. I couldn't figure out how to do that at the Leaflet level, but by adding the handler to the actual Maplibre map, it works great.

var glLayer = L.maplibreGL({
            pane: 'overlayPane', // needed because the vector basemap layer hides it otherwise
            interactive: true,

}).addTo(map);
const gl = glLayer.getMaplibreMap();
// add vector source and layer here
    gl.on('click','points', function (e) {
        debugger
    });

The problem is that if you drag the map and the spot that you drag on is where one of the vector features are, after drag end, treats that as a click and calls my handler. I want it to not do that and just let the drag event be handled as a drag event.

I can't reproduce this issue in a vanilla MapLibre map. Is there a way to fix it with maplibre-gl-leaflet?

Live example at the codepen https://codepen.io/dandormont-the-decoder/full/abRyMPm.

Answer 1

One possible solution would be to catch mousedown event, save mouse position and then on click event compare mouse position with saved mouse position. If position is the same that means it was actual click event, not end of mouse drag.

Relevant part of the code could then look something like this:

var downPos;
gl.on('mousedown','points', function (e) {
  downPos = e.point;
});
gl.on('click','points', function (e) {
  if ((parseInt(e.point.x) == parseInt(downPos.x)) && (parseInt(e.point.y) == parseInt(downPos.y))) {
   console.log('click');
  }
});