topic Re: Map.on ‘Click’ Event Works in IOS but not Android in ArcGIS JavaScript Maps SDK Questions

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

deleted-user-1_r2dgYuILKY — Sun, 12 Dec 2021 01:59:59 GMT

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...
   });‍‍‍‍‍‍

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

RobertScheitlin__GISP — Tue, 05 Jun 2018 16:24:28 GMT

Levi,

This is what I use

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

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

deleted-user-1_r2dgYuILKY — Tue, 05 Jun 2018 16:44:35 GMT

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

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

RobertScheitlin__GISP — Tue, 05 Jun 2018 17:06:18 GMT

Levi,

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

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

deleted-user-1_r2dgYuILKY — Tue, 05 Jun 2018 17:08:02 GMT

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.

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

RobertScheitlin__GISP — Tue, 05 Jun 2018 17:10:31 GMT

Levi,

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

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

deleted-user-1_r2dgYuILKY — Tue, 05 Jun 2018 17:16:54 GMT

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.

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

RobertScheitlin__GISP — Tue, 05 Jun 2018 17:23:12 GMT

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.

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

RobertScheitlin__GISP — Tue, 05 Jun 2018 19:02:53 GMT

Maybe Andy can help.

Andy Gup‌

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

deleted-user-1_r2dgYuILKY — Tue, 05 Jun 2018 19:34:17 GMT

Is he tagged here? I can't send him a message.

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

RobertScheitlin__GISP — Tue, 05 Jun 2018 19:40:02 GMT

I tagged him already

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

deleted-user-1_r2dgYuILKY — Tue, 05 Jun 2018 19:47:50 GMT

Thanks!

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

AndyGup — Tue, 05 Jun 2018 20:32:20 GMT

Hey Levi, map click event works on Cordova 8.0.0 using ArcGIS API for JavaScript 3.24 and Android 8.1.0. That tells me it's very possible Framework 7 is introducing the problem.

Did you try using the ArcGIS API for JavaScript 4.x?

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

deleted-user-1_r2dgYuILKY — Tue, 05 Jun 2018 20:42:49 GMT

I did not. The ArcGIS JS 3.24 portions of this app were ported over from our website. Should I add a Cordova script? The iOS version of this is working like as it should and is ready to be distributed, so I can't make any major changes now.

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

AndyGup — Tue, 05 Jun 2018 21:33:19 GMT

>> Should I add a Cordova script?

From your code snippet line 12 above, I assumed you're already using Cordova?

Since we don't test the JS API with Framework7, here are some options for you:

- Try porting a simple test app to JS API 4.x and see if you have the same issue

- Deep debug this issue in Framework7

- Use something other than Framework7

Something is interfering with the map click. You could try debugging inside the Framework7 code click handlers, for example, click.js.

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

deleted-user-1_r2dgYuILKY — Sun, 12 Dec 2021 02:00:05 GMT

OK. Instead of map.on("click"), $$(document).on(“click”) seems to work on iOS and Android, but it as not as responsive as map.on("click"). Also, sometimes the ESRI basemaps don't load when I navigate to the pages. I have to go back and try again.

It's working in iOS, but I get this error in the dev console in Safari TypeError: undefined is not an object (evaluating 'b.type') in relation to this function:

$$(document).on("click", 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");
            
        }); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I think it's having trouble with evt,mapPoint, but it's still generating a popup.

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

deleted-user-1_r2dgYuILKY — Sun, 12 Dec 2021 02:00:02 GMT

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();
                    
          
               };
               

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