How do I programmatically fire a click event on map or map's GraphicsLayer

[HubertLo]

Hi,

I am using esri maps in our sencha touch application. The click event on the map does not get fired on mobile (Safari browser on iPad) but works just fine on a desktop (Chrome). The same code taken out of Sencha touch works just fine.

My end goal is to show an info window popup when a user clicks on a map graphic.

I am thinking of catching a 'singletap' event supported by sencha touch and somehow fire a click event that esri understands. esri requires a MouseEvent object with mapPoint and screenPoint properties. I can get the x and y coordinates where the user clicked using the arguments passed to singletap event.

Does anyone know how to construct that MouseEvent object manually and how to then programmatically trigger a click event using pure JavaScript, dojo, or senha touch?

Has anyone come across this issue before? I have found some older forums with similar problems but the solutions are outdated and do not apply to the latest versions. One of the solutions was to catch a MouseGesture event but I do not see that in the list of supported events in the latest ArcGIS API for JavaScript.

I am using Sencha Touch 2.2.1 and ArcGIS for JavaScript 3.6

My code snippets

// esri code
require([
            "esri/map",
            "esri/dijit/InfoWindowLite",
            "esri/InfoTemplate",
            "esri/layers/FeatureLayer",
            "dojo/dom-construct",
            "dojo/domReady!"
        ], function(
            Map,
            InfoWindowLite,
            InfoTemplate,
            FeatureLayer,
            domConstruct
            ) {

            var map = new Map(mapId, {
                basemap: "streets",
                center: [-100.16, 48.16], // north america
                zoom: 3
            });

            map.on('click', function() {
                alert('clicked');
            });
/*
            map.on('mouse-down', function() {
                alert('mouse-down');
            });
            map.on('mouse-up', function() {
                alert('mouse-up');
            });
*/
        });

// sencha touch view definition code
Ext.define('myApp.view.EsriMap', {
    extend: 'Ext.Container',
    xtype: 'esrimap',
    config: {
        items: [
            {
                xtype: 'component',
                id: 'map'
            }
        ]
    }
});
// senha touch controller code
this.getEsriMapComponent().bodyElement.on('singletap', function(event, node, options, eOpts) {
            console.log('singletap');
            console.log(event);
            console.log(node);
            console.log(options);
            console.log(eOpts);
});

Thanks for your help.

[DanTalpas]

I have the same problem currently. 

I think your proposed solution would work correctly, but we both need the ESRI event object to be returned, for example:

MAP.on("mouse-down", function (evt) {
//this evt object has the metadata that I need
)};


It would be FANTASTIC if the arcGIS javascript API had a "touch-end" event that fired like the "mouse-down" event above and gave us back the esri event object that we're looking for, I would do some back flips in celebration.

is there anyone out there that can help?

Thanks,
Dan

[SteveCole]

I have no idea but I wonder if this is at all related to a mobile-centric issue that Derek provides a workaround in this thread.

Seems like a quick & easy thing to try!

Steve

[BryanBaker]

I can confirm that the workaround in the post linked to by Steve allows the click event on graphics to work on mobile devices (tested on iPhone 4 and an Android tablet). Just need to add this line after the require statements:

document.dojoClick = false;

[Jitendrudulacaraju]

Hi,
Would it possible for you to share the sample code file with me. I am trying to build a Sencha touch app first time. How do I load the dojo esri/map into the MapViewPage of my Sencha solution?
I was hoping something like this will work:

Ext.define('MobApp.view.ViewMapPage', {
    extend: 'Ext.form.Panel',
    xtype: 'ViewMapPage',
    requires: [
        'esri/map'
    ],

Hi,

I am using esri maps in our sencha touch application. The click event on the map does not get fired on mobile (Safari browser on iPad) but works just fine on a desktop (Chrome). The same code taken out of Sencha touch works just fine.

My end goal is to show an info window popup when a user clicks on a map graphic.

I am thinking of catching a 'singletap' event supported by sencha touch and somehow fire a click event that esri understands. esri requires a MouseEvent object with mapPoint and screenPoint properties. I can get the x and y coordinates where the user clicked using the arguments passed to singletap event.

Does anyone know how to construct that MouseEvent object manually and how to then programmatically trigger a click event using pure JavaScript, dojo, or senha touch?

Has anyone come across this issue before? I have found some older forums with similar problems but the solutions are outdated and do not apply to the latest versions. One of the solutions was to catch a MouseGesture event but I do not see that in the list of supported events in the latest ArcGIS API for JavaScript.

I am using Sencha Touch 2.2.1 and ArcGIS for JavaScript 3.6

My code snippets

// esri code
require([
            "esri/map",
            "esri/dijit/InfoWindowLite",
            "esri/InfoTemplate",
            "esri/layers/FeatureLayer",
            "dojo/dom-construct",
            "dojo/domReady!"
        ], function(
            Map,
            InfoWindowLite,
            InfoTemplate,
            FeatureLayer,
            domConstruct
            ) {

            var map = new Map(mapId, {
                basemap: "streets",
                center: [-100.16, 48.16], // north america
                zoom: 3
            });

            map.on('click', function() {
                alert('clicked');
            });
/*
            map.on('mouse-down', function() {
                alert('mouse-down');
            });
            map.on('mouse-up', function() {
                alert('mouse-up');
            });
*/
        });

// sencha touch view definition code
Ext.define('myApp.view.EsriMap', {
    extend: 'Ext.Container',
    xtype: 'esrimap',
    config: {
        items: [
            {
                xtype: 'component',
                id: 'map'
            }
        ]
    }
});
// senha touch controller code
this.getEsriMapComponent().bodyElement.on('singletap', function(event, node, options, eOpts) {
            console.log('singletap');
            console.log(event);
            console.log(node);
            console.log(options);
            console.log(eOpts);
});

Thanks for your help.