Map.on ‘Click’ Event Works in IOS but not Android

[deleted-user-1_r2dgYuILKY]

I have a PhoneGap hybrid app developed with ArcGIS JS API 3.24 and Framework7 v1. I have a map click event that’s working in IOS, but not Android. Is there an event handler method that works for both?

 map.on('click', function(evt){
    code here...
   });‍‍‍‍‍‍

[RobertScheitlin__GISP]

Levi,

This is what I use

map.on('click, touchend', function(evt){

[deleted-user-1_r2dgYuILKY]

Robert, 

This method works in iOS but not in the Android emulator (appetize.io). I don't have an Android device, so that's what I've been using to test the apk. Here is a link to the debug build:

https://build.phonegap.com/apps/3040375/download/android 

[RobertScheitlin__GISP]

Levi,

   So you are saying that adding touchend does not work either?

[deleted-user-1_r2dgYuILKY]

Not when I run the apk in Appetize.io. Maybe it will work on an actual Android device though? Since I'm using a mouse click through the browser. 

[RobertScheitlin__GISP]

Levi,

   Since touchend is a whole other event I would say yes.

[deleted-user-1_r2dgYuILKY]

OK. My coworker tested it on an Android phone and can't get it to work either. The touch event is supposed to trigger a popup. 

[RobertScheitlin__GISP]

OK. Anytime I have had an issue with click on a mobile device if I added touchend to the event handler it always worked for me.

[deleted-user-1_r2dgYuILKY]

OK. Here is the JS for the app. Map_B is an html page that is loaded from a link button. 

// Initialize app
var myApp = new Framework7();

// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Dom7;

// Add view
var mainView = myApp.addView('.view-main', {
     domCache: true
});

// Handle Cordova Device Ready Event
$$(document).on('deviceready', function() {
    console.log("Device is ready!");
});


myApp.onPageInit('map_B', function (page){
     
     var map;

     require([
         "esri/config",
        "esri/map",
          "esri/arcgis/utils",
        "esri/tasks/Geoprocessor",
        "esri/tasks/GeometryService",
          "esri/graphic",
          "esri/geometry/webMercatorUtils",
          "esri/dijit/Popup",
          "esri/InfoTemplate",
          "esri/dijit/HomeButton",
          "esri/dijit/Search",
          "dojo/dom-construct",
          "dojo/dom",
            "dojo/i18n!esri/nls/jsapi",
          "dojo/dom-attr",
          "dojo/query",
          "dojo/on",           
          "dojo/parser",
          "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
          "dijit/TitlePane",
        "dojo/domReady!"
      ], function (
        esriConfig, Map,  arcgisUtils, Geoprocessor, GeometryService,
          Graphic, webMercatorUtils, Popup, InfoTemplate, HomeButton, Search, 
          domConstruct, dom, esriBundle, domAttr, query, on, parser
      ) {
            
       
            
            esriBundle.widgets.Search.main.placeholder = "Find address, place or lat/lon";

            map = new Map("map", {
            basemap: "hybrid",
               center: [-97, 40],
                 zoom: 3,
                  slider: false
            
          });
     

            esriConfig.defaults.geometryService = new GeometryService("http://gis.mymetcon.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");          
          
            var home = new HomeButton({
          map: map
         }, "HomeButton_B");
         home.startup();
           
           var search = new Search({
            map: map,
               showInfoWindowOnSelect: false,
               enableLabel: false,
               enableHighlight: false,
                  enableSuggestions: true
         }, "search_B");
         search.startup();
              
          var x,y;
            
          //Initial click function     
          map.on('click, touchend', function(evt){
                 
            var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
            x = mp.x.toFixed(3);
            y = mp.y.toFixed(3);
               
          map.graphics.clear();
          var graphic = new Graphic(evt.mapPoint);

          map.graphics.add(graphic);
          map.infoWindow.setFeatures([graphic]);
            map.infoWindow.resize(200,200);     
          map.infoWindow.setContent(" Longitude: " + x.toString() + " <br>Latitude: " + y.toString());
          map.infoWindow.show(evt.mapPoint)
            map.infoWindow.setTitle("Forecast Reports");
            
        }); 
          
            var locationStr;
          
            window.gp_chart = new Geoprocessor("http://gis.mymetcon.com/arcgis/rest/services/Three_Week_Chart/GPServer/ThreeWeekChart");
            
            //Three week chart link click
            var link = domConstruct.create("a",{
                "class": "action", 
                "id": "chartLink_B",
                "innerHTML": "Generate Chart", //text that appears in the popup for the link 
                "href": "javascript: void(0);"
              }, query(".actionList", map.infoWindow.domNode)[0]);
          
            on(link, "click", function()
                    { 

                    window.navigator.notification.prompt(
                      "Enter Location Name: ", // message
                      handleLocationPrompt, // callback
                      "", //title
                      ["Ok", "Exit"] // button titles
                    );

                    // handle user's dialog action
                    function handleLocationPrompt(results) {
                      if (results.buttonIndex === 1) {
                         // Ok
                         locationStr = results.input1;
                         
                          var lat,lon = "";
                          lat = x.toString();
                          lon = y.toString();

                    var taskParams = {
                      "Latitude": lat,
                      "Longitude": lon,
                      "Location": locationStr
                      
                    };
                    
                      domAttr.set(dom.byId("chartLink_B"), "innerHTML", "Generating Chart...");
                      window.gp_chart.execute(taskParams, gpChartResultAvailable);

                      }
                    }
                    });
               
                  var content = "";
                  var chartPath;
                  
                 function gpChartResultAvailable(results, messages){
                     domAttr.set(dom.byId("chartLink_B"),"innerHTML", "Three Week Chart");
                     //clear any existing features displayed in the popup 
                    map.infoWindow.startup();
                    
                     if(results == 0){
                           var chartPath = "http://gis.mymetcon.com/Test_Charts/Three_Week_Chart_for_" + locationStr + ".png";
                           //content = '<IMG SRC="' + chartPath + '" width=100% height=100%>';
               
                     }else{
                           content = " Unable To Generate Chart";
                     }
                    
                    map.infoWindow.resize(250, 170);
                    map.infoWindow.setTitle("Click on Chart");
               
                    var img = document.createElement("img");

                    img.src=chartPath;
                    img.width=240;
                    img.height=160;
                    img.addEventListener("click", function () {window.location = chartPath;});
                    map.infoWindow.setContent(img);
                    map.infoWindow.reposition();
                    
          
               };
               

        }); 
   
})‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Maybe Andy can help.

Andy Gup‌