How to emulate a click on a MapBox GL JS map?

Question

I need to emulate a user click on my MapBox GL JS map.

I doesn't matter where in my map: could be useful to do in the point at the center of my maps if this could be easier.

UPDATE

I've found here https://stackoverflow.com/questions/18323105/programmatically-opening-a-popup-in-a-mapbox-map something that could be useful ...

map.fireEvent('click', {latlng: L.latLng(28.04419, -81.947864)});

... but seems to be something about Leaflet

I'd like my code coud be something like this ("broken code" ... )

    bounds = map.getBounds();
    x = bounds._ne.lng;
    y = bounds._ne.lat;

    map.fireEvent('click', {latlng: L.latLng(x, y)});

Does fireEvent exist in MapBox GL JS or are there alternatives?

Answer 1

In the doc for Map:

The Map class mixes in Evented methods.

Doc for Evented has info on fire so you can use something like map.fire('click', { lngLat: ll, point: pt }).

Answer 2

Any answer that depends on map.fire is deprecated.

To simulate a click in MapboxGL, the easiest method involves using the .click() method in any element.

document.querySelector('canvas').click()

This may not be what you're looking for; you might wish to click at a certain location. This is where MouseEvent is your friend:

const map = document.querySelector('canvas')

const event = new MouseEvent({
  clientX: 200,
  clientY: 200,
  bubbles: true
}

map.dispatchEvent(event)

This may not work if you have more than one map or html canvas on the screen. If you find yourself selecting the wrong element with the query selector, add id="map" to your map html element, and use document.querySelector('#map') instead.

Answer 3

Try this:

map.fire('click', { latLng: coords, point: map.project(coords), originalEvent: {} })

From: https://github.com/mapbox/mapbox-gl-js/issues/5060