4

When a user click on a specific feature, I display a simple overlay (popup). But I need to display this popup on a closest features when a user search a random location.

So, I search to simulate the 'click' event on a specific coordinates to simulate map click event and display my popup.

I could use dispatchEvent('click'), but this method only trigger the map click event without coordinates.

And without coordinates, it's impossible to set overlay position...

Edit :

In my environement, i have an unlimited maps in the DOM page (Wordpress widget / PHP + JS). Sometimes, the Wordpress system call the popup of an other map. To create a simple code, my idea was to directly call the click event of the targeted map.

Others solutions exists but i need to now how to fire click event with specific coordinates ? Just out of curiosity.

dispatchEvent doc.

4
  • 1
    OpenLayers has some tests which simulate pointer events, for example github.com/openlayers/openlayers/blob/master/test/spec/ol/…
    – Mike
    Dec 18, 2019 at 11:20
  • 2
    If you know the coordinates, you can get the features with map.forEachFeatureAtPixel function, combined with map.getPixelFromCoordinate, or better with layer.getClosestFeatureToCoordinate and display popup after, so no need to simulate click in my opinion.
    – Catch
    Dec 18, 2019 at 12:54
  • Thanks Mike, but i'd already tested this openLayers tests (thanks google). I could test again...
    – Gaet
    Dec 18, 2019 at 13:31
  • Catch, i already use getClosestFeatureToCoordinate to get coordinates from research. After that, i need to pass those coordinates to the map by the click event. But in my case i'd few many maps in one page and my simple solution was to directly fire click event into the correct map.
    – Gaet
    Dec 18, 2019 at 13:34

2 Answers 2

3

If you look at the documentation for dispatchEvent(event) method, description of event parameter says: The event parameter can either be a string or an Object with a type property. This means you can construct your own event where type propoperty will have value 'click' and coordinate property will hold desired click coordinates.

Click event simulation for layer myLayer could then look something like this:

var evt = {};
evt.type = 'click';
evt.coordinate = [];
evt.coordinate[0] = 6633511;
evt.coordinate[1] = 4079902;
myLayer.dispatchEvent(evt);

You would then catch the click event on layer with:

myLayer.on('click', function(evt) {
  console.log('layer click: ' + evt.coordinate);
});
2
  • I'm trying to run: const mm = map.getLayers().item(1).dispatchEvent(evt) but get null and the `map.getLayers().item(1).on('click', () => {...}) is doing nothig in a openlayers 6 + React + Material UI programs. Any help is welcomed. Nov 17, 2020 at 21:37
  • 1
    It doesn't work for you because call map.getLayers() does nor return an array of layers, but OL collection of layers (see openlayers.org/en/latest/apidoc/…). To get the array from a collection, you have to use .getArray() method. In your case that would for example look like map.getLayers().getArray()[1].dispatchEvent(evt).
    – TomazicM
    Nov 18, 2020 at 14:43
2

You can simulate and easily catch events like this:

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
})

const simulate () => {
  const event = {
    type = 'click',
    coordinate = [],
  }

  event.coordinate[0] = 6633511
  event.coordinate[1] = 4079902

  map.dispatchEvent(event)
}

map.on('click', e => {
  console.log(`layer click: ${e.coordinate}`)
})

simulate()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.