hubertlo

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

Discussion created by hubertlo on Aug 28, 2013
Latest reply on Nov 19, 2013 by jitendrudu
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.

Outcomes