topic Re: Programmatically fire map's click event in ArcGIS JavaScript Maps SDK Questions

Programmatically fire map's click event

TomRippetoe — Tue, 22 Jul 2014 21:49:02 GMT

Hello,

I am using the Esri's Javascript API 3.9. I have created functionality that allows a user to add a graphic to the map by clicking on the map. The type of graphic added depends on some previous selection that user has made. For example, selecting one option (say Option A) adds a circle graphic whereas selecting a different option (say Option B) adds a square graphic.

My need for the programmatic map 'click' event is with the automated unit tests I am creating (I am using Jasmine for my unit tests). My hope is to write a unit test which selects programmatically Option A, programmatically triggers a click on the map, and verifies that the correct 'map click' event handler was called (the one that handles the map clicks when Option A is selected).

I have tried using dojo's emit function. The code seems to execute with no errors, i.e. the function call returns an 'event' object, but no map click event handler is ever called. I am pretty sure the event is hooked up correctly because if I follow those same steps manually, the correct event handler is called. As part of my testing, i have tried passing the 'emit' function both the map object and the div which contains the map object. Neither way seems to work, i.e. the click event handler is not called. Its not critical to my testing that a 'correct' argument is passed to the event handler; i just want to know that the correct handler is called.

So, my question is how can i programmatically fire/trigger a map's click event?

Thank you.

//relevant code

this.map = new Map(divId, {

basemap: "streets",

center: [-122, 45.6],

zoom: 5,

smartNavigation: false

});

//passing the div which contains the map

var theMapDiv = dom.byId(divId);

var testEvent = on.emit(theMapDiv, "click", { bubbles: true, cancelable: true });

//passing the map

var testEvent = on.emit(this.map, "click", { bubbles: true, cancelable: true });

Re: Programmatically fire map's click event

StephenLead — Wed, 23 Jul 2014 03:16:31 GMT

Great question.

I have no experience with Jasmine, but I have done similar testing using Selenium‌. This is a great framework for simulating user input and interaction.

Re: Programmatically fire map's click event

TomRippetoe — Wed, 23 Jul 2014 15:57:23 GMT

Thanks Stephen. I did a quick peek at Selenium and that might get me down the right path with its functionality to record user interactions. I will post back and let you know.

I am still hoping that there is some way, outside of a testing framework, to programmatically trigger a map click event (or any other map event i suppose).

Thanks again.

Tom

Re: Programmatically fire map's click event

StephenLead — Wed, 23 Jul 2014 23:44:59 GMT

Hi Thomas,

Here's another potential approach: jquery - How to simulate a click by using x,y coordinates in JavaScript? - Stack Overflow‌

(where the XY would be page coordinates over the map). I haven't tested this......

Steve

Re: Programmatically fire map's click event

TomRippetoe — Thu, 24 Jul 2014 17:04:31 GMT

Hi Stephen.

Thanks again for the tip.

I tried both approaches described in the Stack Overflow question you linked to......without any good luck for either one.

I suspect the challenge is to know which piece of the 'overall map' is emitting the click event in the real world - is it the container, one of the layers, etc. Once i figure that out, i can have that particular element programmatically trigger the event?

I'll keep poking around.

Re: Programmatically fire map's click event

TomRippetoe — Thu, 24 Jul 2014 19:28:39 GMT

I was able to figure this out. It turns out that dojo adds an 'emit' function to javascript objects. Instead of using 'on.emit()' I just called 'object.emit()'

The old, not working code:

var testEvent = on.emit(this.map, "click", { bubbles: true, cancelable: true });

The new, working code:

this.map.emit("click", { bubbles: true, cancelable: true });

Re: Programmatically fire map's click event

StephenLead — Thu, 24 Jul 2014 23:14:02 GMT

Excellent - I'm glad you figured it out!

Re: Programmatically fire map's click event

JeffPace — Fri, 08 Aug 2014 16:17:23 GMT

How do you specify the click location with

map.emit("click", { bubbles: true, cancelable: true });

Re: Programmatically fire map's click event

TomRippetoe — Mon, 11 Aug 2014 17:48:02 GMT

Hi Jeff.

You can 'value add' a 'mapPoint' and/or 'screenPoint' objects to the click event. I think 'mapPoint' might be the object you are looking for. I have done something like this (I am pretty sure that i am not doing 'screenPoint' correctly - that's why i am using mapPoint):

var scrPt = new Point(-122, 45.6);

var mpPt = new Point(-122, 45.6);

map.emit("click", { bubbles: true, cancelable: true, screenPoint: scrPt, mapPoint: mpPt });

Re: Programmatically fire map's click event

deleted-user-FwGV4nJuPxiQ — Thu, 11 Sep 2014 14:58:34 GMT

Thanks for documenting this! It's crucial to my app and I couldn't find this information anywhere else.

As you say, it's not clear why you need to provide a screen point and a map point, but you can use map.toScreen(mapPoint) and map.toMap(screenPoint) to convert either one to the other.

Re: Programmatically fire map's click event

deleted-user-YYhuCJuuEn9L — Mon, 06 Apr 2015 16:19:35 GMT

Thanks. This was helpful.

Re: Programmatically fire map's click event

Anonymous User — Wed, 12 Jul 2017 15:21:22 GMT

This was an awesome start to my solution, thanks so much!

I needed to generate a click based on a specific point. For example the current map center, like so:

//Get the map center point that outputs an object with: type (point), x, y, and spatialReference

var currentMapCenter = map.getExtent().getCenter();

//Emulate a click on the map center point

map.emit("click", { mapPoint: currentMapCenter });

Re: Programmatically fire map's click event

NathanielRindlaub — Wed, 23 May 2018 17:44:59 GMT

Does anyone have any advice for how to fire a click event programmatically in the 4.x version of the API? It looks like the map.event method is no longer available.

My goal is to be able to select a feature on a MapImageLayer programmatically, and have it's corresponding popup display as if it had been clicked.

Any thoughts would be much appreciated!