Double tap on the map not work in the chrome of Nexus 7

joewang · ‎06-17-2014

Hi ,

I am stuck with a problem which is the double tap not working in the chrome of Nexus7.

Say you have code like below. please help to review it .

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9,IE=10" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="http://js.arcgis.com/3.9/js/dojo/dojo/resources/dojo.css" rel="stylesheet">
    <link href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet">
    <link href="http://js.arcgis.com/3.9/js/esri/css/esri.css" rel="stylesheet">
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
        require(['dojo/_base/lang',
            'dojo/dom-construct',
            'dojo/dom',
            'dojo/_base/html',
            'esri/arcgis/utils',
            "esri/toolbars/draw",
            "/Scripts/AGIS/utils.js",
            'esri/InfoWindowBase', "dojo/has", "dojo/_base/sniff", "dojo/domReady!"
        ], function (lang, domConstruct, dom, html, esriUtils, Draw, utils, infoWindow, has,d) {

            var mapDiv = html.create('div', {
                id: "map",
                style: lang.mixin({
                    position: 'absolute',
                    backgroundColor: '#EEEEEE',
                    overflow: 'hidden'
                }, utils.getPositionStyle({
                    "left": 0,
                    "top": 0,
                    "right": 0,
                    "bottom": 0
                }))
            });

            html.place(mapDiv, "agis-layout-manager");
            var b = navigator.userAgent;
            console.log(b);
            alert(b);

            var a = b.match(/Android\s+(\d+\.\d+)/i);
            a && alert("a[0]=" + a[0]);
            a && alert(parseFloat(a[0]));
            a && alert("a[1]=" + a[1]);
            a && alert(parseFloat(a[1]));
            a && alert("a[2]=" + a[2]);
            a && alert(parseFloat(a[2]));

            var c = b.match(/(iPhone|iPad|CPU)\s+OS\s+(\d+\_\d+)/i);
            c && alert("c[0]=" + c[0]);
            c && alert("c[1]=" + c[1]);
            c && alert("c[2]=" + c[2]);

            alert('d("esri-iphone") =' + d("esri-iphone"));
            alert('d("esri-android") =' + d("esri-android"));
            alert('d("esri-touch") = ' + d("esri-touch"));//true
            alert('d("esri-pointer") = ' + d("esri-pointer"));//undefined

            var mapDef = esriUtils.createMap("8e900bdba72f451cbf5141a9a6073532", "map");

            mapDef.then(lang.hitch(this, function (response) {
                var map = response.map;
                if (map.loaded) {
                    _initMap(map);
                } else {
                    dojo.connect(map, "onLoad", function () {
                        _initMap(map);
                    });
                }
            }));

            var _initMap = function (map) {
                //map.enableDoubleClickZoom();
                alert("map.isDoubleClickZoom is " + map.isDoubleClickZoom);
                alert("map.isPan is " + map.isPan);

            };
        });
    </script>
</head>
<body class="claro">
    <div id="main">
        <div style="position:relative; margin:0; padding:0; width:100%; height:100%;">
            <div style="position:relative;width:100%; height:100%;z-index:0;" id="agis-layout-manager">

            </div>
        </div>
    </div>

</body>
</html>

Could someone please help me out ? Thanks.

Best Regards
Joe

******Updated*********

I test above script in below devices. Please review it.

1. Surfari in IPad2 (Double tap works fine.).
2. IE11 in Surface (Double tap not works) (and Why the feature esri-touch test is false? and the feature esri-pointer test is true.).
3. Chrome in Window7 computer(Mouse double click works).
4. Chrome in Nexus7 (Double tap not works).

JonathanUihlein · ‎06-18-2014

Hey Joe, thanks for your feedback. Touch issues can be tricky.

Making a note of this thread so I can come back to it after some research.

joewang · ‎06-18-2014

Hey jonathan,Thanks your kind reply,

I found it seems the map in my sample has some problem which I don't know what exactly it is.
Because If I used the map from https://developers.arcgis.com/javascript/jssamples/ags_createwebmapid.html which map id is 4778fee6371d4e83a22786029f30c7e1 , The touch issue doesn't occur.

I check the detail of both them, The difference is
My map(8e900bdba72f451cbf5141a9a6073532) has 4 feature layer from feature services.
The map in tutorial (4778fee6371d4e83a22786029f30c7e1) has a layer from map services.

I don't know if there any more difference between them, If I was missing, Please let me know, and If it is the root cause of issue, Please give me some direction to fix it .

Best Regards
Joe

JonathanUihlein · ‎06-20-2014

Thanks for the additional information Joe!

I am looking into all touch issues in the Draw and Edit toolbars and you have been very helpful.

From what I've seen so far, some older Blackberry specific exceptions were interfering with new IE11 touch events. This might be the same issue affecting Chrome.

Touch should be working correctly in all device/software combinations in the next release.

joewang · ‎06-25-2014

Thanks for the additional information Joe!

I am looking into all touch issues in the Draw and Edit toolbars and you have been very helpful.

From what I've seen so far, some older Blackberry specific exceptions were interfering with new IE11 touch events. This might be the same issue affecting Chrome.

Touch should be working correctly in all device/software combinations in the next release.

Hey jonathan,

Thanks your kind reply which make this issue more clear. We are struggling to find a way to solve it. By the way, Could you please let us know what is the plan of the next release? thanks.

Best Regards
Joe

JeffPace · ‎06-25-2014

Thanks for the additional information Joe!

I am looking into all touch issues in the Draw and Edit toolbars and you have been very helpful.

From what I've seen so far, some older Blackberry specific exceptions were interfering with new IE11 touch events. This might be the same issue affecting Chrome.

Touch should be working correctly in all device/software combinations in the next release.

Can you verify that tap and double tap will function as well? I am having a heck of a time getting doubletap to fire on a feature layer.
IF i manually add it, it breaks placing and moving points.

JonathanUihlein · ‎06-25-2014

Can you verify that tap and double tap will function as well? I am having a heck of a time getting doubletap to fire on a feature layer.
IF i manually add it, it breaks placing and moving points.

Ideally, yes.

What specific browser/device combo are you having double-tap issues with?

JeffPace · ‎06-25-2014

Ideally, yes.

What specific browser/device combo are you having double-tap issues with?

to be honest, all of them.

Specifically, ipad and samsung galaxy. Double-tap doesnt work at all. Or more specfically, there is no way to catch it.

Below is code to show a custom dialog box on double click of a feature layer point. Currently there is no way to attach this to a doubletap event

I have tried some suggestions, but each time I attach a doubletap event to the graphic it breaks being able to tap and move a point.

var onLayerDblClick= function(evt){
       var t = layer.template;
  
          var content = esriLang.substitute(evt.graphic.attributes,t);
          var highlightGraphic = new Graphic(evt.graphic.geometry,new SimpleMarkerSymbol());
          map.graphics.add(highlightGraphic);

          
          
          dialog.set("content", content);

          domStyle.set(dialog.domNode, "opacity", 0.85);
          dialog.show();
          dialog.connect(dialog, "hide", function(e){
                map.graphics.clear();
            });
        };



        


           fLayer.on("dbl-click", lang.hitch(this, function(evt){
          //     alert('dbl click');
                onLayerDblClick(evt);
           }));

StephenBaker1 · ‎06-25-2014

Touch should be working correctly in all device/software combinations in the next release.

Is there any indication when this next release will be, and if it will also fix drag support in IE11.

joewang · ‎06-25-2014

to be honest, all of them.

Specifically, ipad and samsung galaxy. Double-tap doesnt work at all. Or more specfically, there is no way to catch it.

Below is code to show a custom dialog box on double click of a feature layer point. Currently there is no way to attach this to a doubletap event

I have tried some suggestions, but each time I attach a doubletap event to the graphic it breaks being able to tap and move a point.
var onLayerDblClick= function(evt){
       var t = layer.template;
  
          var content = esriLang.substitute(evt.graphic.attributes,t);
          var highlightGraphic = new Graphic(evt.graphic.geometry,new SimpleMarkerSymbol());
          map.graphics.add(highlightGraphic);

          
          
          dialog.set("content", content);

          domStyle.set(dialog.domNode, "opacity", 0.85);
          dialog.show();
          dialog.connect(dialog, "hide", function(e){
                map.graphics.clear();
            });
        };



        


           fLayer.on("dbl-click", lang.hitch(this, function(evt){
          //     alert('dbl click');
                onLayerDblClick(evt);
           }));

Hi Jeff,

Please note that Dbl click is not double-tap. They are not the same thing . As I known so far . There is no such event name "double tap" which already handled by nowadays modern browser. that means it should be handled by 3rd-party javascript library if you want it to be.
So modern browser can not know the double tap gesture.

(If I said something wrong, Please correct me. thanks in advance!)

Best Regards
Joe