topic Re: Javascript API map 3.7 has no coordinates when handling map click in ArcGIS JavaScript Maps SDK Questions

Javascript API map 3.7 has no coordinates when handling map click

GregHawk — Thu, 17 Oct 2013 15:44:46 GMT

In the new 3.7 API a map click generated by a touch on a mobile device no longer has any coordinates for X and Y. This is obviously an issue if you intend to place a graphic on the map or do anything based on where the tap was.

[ATTACH=CONFIG]28408[/ATTACH]

Re: Javascript API map 3.7 has no coordinates when handling map click

derekswingley1 — Thu, 17 Oct 2013 16:48:23 GMT

Can you post code to reproduce this? Based on this post and a discussion on twitter, I think there's an issue here but haven't been abel to get a simple case to reproduce it.

I'm seeing coords when I run this in ios 7: http://rawr.gr/egz (tap the map)

Re: Javascript API map 3.7 has no coordinates when handling map click

GregHawk — Thu, 17 Oct 2013 17:58:32 GMT

Working on a simple example. I had found a sample on the esri site that exhibited it but I am having trouble finding it now.

Re: Javascript API map 3.7 has no coordinates when handling map click

GregHawk — Thu, 17 Oct 2013 17:59:14 GMT

I also noticed on the sample you sent that the alert box fired twice

Re: Javascript API map 3.7 has no coordinates when handling map click

GregHawk — Thu, 17 Oct 2013 18:30:34 GMT

one difference I am noting is that when the proper event comes back it is a MouseEvent. When the incorrect one comes back it is just Event. It still has mapPoint, and screenPoint properties but they are messed up. This is presumably why there is no coordinate so it has to do with the wrong event firing. I did notice that esri re-fires some events. This can have the effect of losing screen coordinates. I found that out by looking up how to simulate a mouseclick. You can but there are no coords for example.

Re: Javascript API map 3.7 has no coordinates when handling map click

derekswingley1 — Thu, 17 Oct 2013 21:08:59 GMT

I think this is the likely culprit of the missing map point coordinates: https://bugs.dojotoolkit.org/ticket/17228

Are you using any dojox/mobile modules?

If so, try

document.dojoClick = false

after dojox/mobile modules are loaded.

Re: Javascript API map 3.7 has no coordinates when handling map click

GregHawk — Sat, 11 Dec 2021 18:18:48 GMT

I finally figured it out. If you include either dojox/mobile/View or dojox/mobile/ScrollableView or presumably anything derived from mobile view then it creates the problem. Here is sample code that illustrates the issue.

<!DOCTYPE html>

<html>
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style>
        html, body, #mapView
        {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css" />
    <script src="http://js.arcgis.com/3.7/"></script>
    <script>
        var map;

        require([
                "esri/map",
                "dojox/mobile/View",
                //"dojox/mobile/ScrollableView",
                "dojo/domReady!"
        ], function (
                Map
            ) {

            map = new Map('mapDiv', {
                basemap: "streets",
                zoom: 4
            });
            map.on("click", function (e) {
                alert(e.mapPoint.x.toFixed() + ", " + e.mapPoint.y.toFixed());
            });
        });
    </script>
</head>
<body>
    <div id="mapDiv"></div>
</body>
</html>

Re: Javascript API map 3.7 has no coordinates when handling map click

GregHawk — Wed, 23 Oct 2013 14:08:47 GMT

Alright. After talking to esri support and working with them we found a method that will allow you to include View in your requires statement and still get coordinates. The issue was a dojo bug technically. Though it was not supposed to be supported in dojo yet the fix suggested there does work. After loading the requires add the following line.

document.dojoClick = false;

Also there is an issue that when you tap/click the event fires twice. One is just an object and the other is a MouseEvent. Depending on the user agent (mobile or desktop) you need to read a different object. Here is the code to short circuit the double event and listen to the appropriate event.

if ((Object.prototype.toString.call(evt).slice(8, -1) == 'MouseEvent') && isMobile || (Object.prototype.toString.call(evt).slice(8, -1) == 'Object' && !isMobile))

It is up to you how to detemine if "isMobile". I suggested checking user-agent

Re: Javascript API map 3.7 has no coordinates when handling map click

ErikkRoss — Wed, 23 Oct 2013 16:33:40 GMT

Also there is an issue that when you tap/click the event fires twice. One is just an object and the other is a MouseEvent. Depending on the user agent (mobile or desktop) you need to read a different object. Here is the code to short circuit the double event and listen to the appropriate event.
if ((Object.prototype.toString.call(evt).slice(8, -1) == 'MouseEvent') && isMobile || (Object.prototype.toString.call(evt).slice(8, -1) == 'Object' && !isMobile))
It is up to you how to detemine if "isMobile". I suggested checking user-agent

I have been running into this fire twice problem. Can you explain where this code should be placed? Using your sample page, where would this be placed? Does it go within the map.on click event? I do understand that the isMobile variable would have to be set prior.

Re: Javascript API map 3.7 has no coordinates when handling map click

ErikkRoss — Sat, 11 Dec 2021 18:18:51 GMT

I have been running into this fire twice problem. Can you explain where this code should be placed? Using your sample page, where would this be placed? Does it go within the map.on click event? I do understand that the isMobile variable would have to be set prior.

I was able to figure this out. The code does need to be placed inside the click event function. I also found out that if you are using the old connect style events you only need the following code:

 if ((Object.prototype.toString.call(evt).slice(8, -1) != 'MouseEvent'))

Full example:

//use older connect event style
dojo.connect(map, "onClick", doIdentify);

function doIdentify(evt) {

    //on mobile devices this event will fire multiple times, Check the evt to see if one that fires contains MouseEvent...if it does, ignore it.     
   if ((Object.prototype.toString.call(evt).slice(8, -1) != 'MouseEvent')) 
   {
         //code for click goes here. 
   }

}

That was all I needed to get rid of the fire twice problem. I have tested it on an Android phone, tablet and a iPad. The double firing stopped. Now, I am not using mobile view or scrollableview in my application, but I was still running into that fire twice problem on mobile devices.

If you use the new "On Style" then this code will not work because "Object" will also be returned instead of "MouseEvent" on moblie devices. If you want to use the on style you'll need to use the code that greghawk posted. For now, I am going to use the old connect events so I don't have to do mobile detection, and hope that ESRI solves this problem.

One issue I did run into though. If you are using esri.toolbars.Draw, the event property is only returned when using the "on" event. The connect event style only returns a geometry property. The only way to check the event would be to use the "on" style.

Re: Javascript API map 3.7 has no coordinates when handling map click

deleted-user-Jie3eyjOl9XM — Wed, 30 Oct 2013 11:34:30 GMT

I'm definitely seeing this error on Android, using both 3.7 compact and 3.7 complete. Consequently, infoWindows are appearing in the wrong place.

Using dojoClick solves the InfoWindow problem on an Android 2.3 phone, but on a Kindle Fire HD, the fix prevents any InfoWindow from showing. Any thoughts on that?

The click twice issue doesn't affect me, since my web app is presenting a map from ArcGIS.com, using the InfoWindow defined for the map service, so I don't even have a click handler.

Re: Javascript API map 3.7 has no coordinates when handling map click

AzharIbrahim — Tue, 12 Nov 2013 17:22:19 GMT

Would this be why my toolbars.draw.polyline only keeps the first and last points on a mobile device? It works fine on desktop browsers.

Re: Javascript API map 3.7 has no coordinates when handling map click

deleted-user-Jie3eyjOl9XM — Mon, 25 Nov 2013 18:12:20 GMT

I'm definitely seeing this error on Android, using both 3.7 compact and 3.7 complete. Consequently, infoWindows are appearing in the wrong place. Using dojoClick solves the InfoWindow problem on an Android 2.3 phone, but on a Kindle Fire HD, the fix prevents any InfoWindow from showing. Any thoughts on that?.

To clarify and update my situation, for me the dojoClick fix resolves the issue where the infoWindow shows in the wrong place. This fix works on all devices. (I was wrong about the Kindle) But, I am still getting the click event firing twice on Android phones. It doesn't appear to be happening on iOS or Android tablets -- just phones.

Re: Javascript API map 3.7 has no coordinates when handling map click

KarenRobine — Mon, 25 Nov 2013 18:55:40 GMT

To clarify and update my situation, for me the dojoClick fix resolves the issue where the infoWindow shows in the wrong place. This fix works on all devices. (I was wrong about the Kindle) But, I am still getting the click event firing twice on Android phones. It doesn't appear to be happening on iOS or Android tablets -- just phones.

I fixed this by setting a variable, doInfoWindow, to true if I'm processing the first time the event fires. When the infowindow is done processing, I set it back to false. I then check this variable in my click event to make sure the Info Window code doesn't process twice.