Detecting mouse move end event in Mapbox GL JS?

Question

I need to detect when mouse over mapbox gl js ends movement in order to make a request to the server only when mouse has stopped the movement but it doesn't exist a "mouseStop" event or anything similar in Mapbox GL JS Api reference

Any idea how to solve this?

Answer 1

I have found a solution that works for me along the lines of @geozelot's comments and based on 2on solution of https://stackoverflow.com/questions/17646825/how-to-detect-when-mouse-has-stopped implemented in jsfiddle

I've made this jsfiddle I've decided that timer was equal to 150ms, I think it is enough to detect when "mouse stops" @TomazicM you could try it.

Relevant code:

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [2.175, 41.40],
  zoom: 12
});

let timer;

function mouseStopped(){

    document.getElementById("coordinates").innerHTML = "Mouse stopped";
    console.log("Mouse stopped");

}

map.on("mousemove", function (e) {

  clearTimeout(timer);
  timer = setTimeout(mouseStopped,150);
  
  document.getElementById("coordinates").innerHTML = `${e.lngLat.lng}, ${e.lngLat.lat}`;

});