topic Re: Double tap on the map not work in the chrome of Nexus 7 in ArcGIS JavaScript Maps SDK Questions

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

joewang — Wed, 18 Jun 2014 02:21:11 GMT

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).

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

JonathanUihlein — Wed, 18 Jun 2014 19:38:35 GMT

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.

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

joewang — Thu, 19 Jun 2014 00:53:50 GMT

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

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

JonathanUihlein — Fri, 20 Jun 2014 16:55:39 GMT

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.

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

joewang — Wed, 25 Jun 2014 07:22:28 GMT

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

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

JeffPace — Wed, 25 Jun 2014 13:23:51 GMT

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.

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

JonathanUihlein — Wed, 25 Jun 2014 15:20:50 GMT

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?

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

JeffPace — Sun, 12 Dec 2021 02:53:53 GMT

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

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

StephenBaker1 — Wed, 25 Jun 2014 18:05:31 GMT

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.

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

joewang — Sun, 12 Dec 2021 02:53:56 GMT

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

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

JeffPace — Thu, 26 Jun 2014 02:30:59 GMT

Esri JavaScript API is built on dojo. Dojo handles double tap just fine

http://dojotoolkit.org/reference-guide/1.10/dojox/gesture.html

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

joewang — Thu, 26 Jun 2014 09:09:06 GMT

Esri JavaScript API is built on dojo. Dojo handles double tap just fine

http://dojotoolkit.org/reference-guide/1.10/dojox/gesture.html

Hi Jeff,

Yes, dojox.gesture.tap is right way to go . Because double click is standard dom event. But double tap is not.

So need dojox to implement it. try to use the code .

fLayer.on(tap.doubletap, lang.hitch(this, function(evt){
          //     alert('dbl tap');
                onLayerDblClick(evt);
           }));

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

JeffPace — Thu, 26 Jun 2014 11:21:05 GMT

that is the exact code that i want to use, that doesn't work, that i was hoping jon could check on.

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

JonathanUihlein — Sun, 12 Dec 2021 02:53:59 GMT

that is the exact code that i want to use, that doesn't work, that i was hoping jon could check on.

I'll look into that.

In the meantime, see if the following workaround is suitable:

          on(map.container, tap, function(e){
            if(e.target.e_graphic){
              console.log("tapped graphic");
            }
          });

Although it doesn't specifically target the feature layer, this will return a graphic from the feature layer.
This may or may not be helpful for your use-case.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Hello World</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
  <script src="http://js.arcgis.com/3.9/"></script>
  <style type="text/css">
    html, body, #map {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
  <script>

    require([
      "dojo/on",
      "dojo/ready",
      "esri/map",
      "dojox/gesture/tap",
      "esri/layers/FeatureLayer"
    ], function(
      on,
      ready,
      Map,
      tap,
      FeatureLayer
    ) { 
  
      ready(function(){
      
        map = new Map("map", {
          basemap: "topo",
          center: [-117.198, 34.049],
          zoom: 14
        });
      
        // Map Load
        on(map, "load", function(){
        
          var ambulanceLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/RedlandsEmergencyVehicles/FeatureServer/0", {
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"]
          });
          
          map.addLayers([ambulanceLayer]);
          
          on(map.container, tap, function(e){
            if(e.target.e_graphic){
              console.log("tap a graphic: ", e.target.e_graphic);
            }
          });
          
          on(map.container, tap.hold, function(e){
            if(e.target.e_graphic){
              console.log("tap.hold on a graphic: ", e.target.e_graphic);
            }
          });
          
          on(map.container, tap, function(e){
            if(e.target.e_graphic){
              console.log("double tap a graphic: ", e.target.e_graphic);
            }
          });
          
          //on(map.container, tap.hold, function(e){console.log("tap.hold");});
          //on(map.container, tap.doubletap, function(e){console.log("tap.doubletap");});
          
        });
      });
    });
  </script>
</head>
    <body class="claro"></body>
</html>

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

JeffPace — Sun, 12 Dec 2021 02:54:01 GMT

I'll look into that.

In the meantime, see if the following workaround is suitable:

          on(map.container, tap.doubletap, lang.hitch(this, function(e){
            if(e.target.e_graphic){
              console.log("tapped graphic");
            }
          }));

i added this to my editing widget config code. doubletap events fire great. However it breaks two things

   fLayer.on("selection-complete", lang.hitch(this, function(graphics){
                     alert('selection-complete');
                 //    console.dir(graphics);
                        if(fLayer.getSelectedFeatures().length>0){
       if(has('touch')){
        //alert('selection complete');
                            map.disableMapNavigation();
        alert('nav disabled');
       }
                            registry.byId("EditContainer").selectChild(registry.byId("editAttributePane"));
                            fLayer.redraw();
                        }else{
       if(has('touch')){

       map.enableMapNavigation();
       alert('nav enabled');
       }
                            registry.byId("EditContainer").selectChild(registry.byId("editToolPane"));
                        }
                    }));

1. There are two or more featurelayers in a loop. I have an onselectioncomplete event for each that fires map.disableMapNavigation() if a feature is selected. This is necessary to be able to move a selected point. (unfortunately). If i add your code, disableMapNavigation still fires, but touch events still pan the map and break being able to move a point
2. Adding that code, due to scope ,doesnt quite get me to where i need to be. Is there a way (i need to sniff the e.target.e_graphic element) to fire the respective featureLayer's double-click event on the captured double-tap?

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

JonathanUihlein — Thu, 26 Jun 2014 22:13:48 GMT

1. There are two or more featurelayers in a loop. I have an onselectioncomplete event for each that fires map.disableMapNavigation() if a feature is selected. This is necessary to be able to move a selected point. (unfortunately). If i add your code, disableMapNavigation still fires, but touch events still pan the map and break being able to move a point

I'm not 100% sure what you are saying here.
Just to be clear: you are saying that disableMapNavigation() does not respect touch events, and touch events still move the map even after calling disableMapNavigation()?

2. Adding that code, due to scope ,doesnt quite get me to where i need to be. Is there a way (i need to sniff the e.target.e_graphic element) to fire the respective featureLayer's double-click event on the captured double-tap?

Is there something from the double-click event itself that you need that you cannot get from the double-tap event?

Otherwise, you could use something like aspect.after but that may be overly complicated for your use-case.

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

JeffPace — Fri, 27 Jun 2014 12:21:01 GMT

Sorry Jon, I know its confusing. Let me do my best to explain.

Workflow

1. Add map with feature layer.
2. Touch to select point, try to move, map pan events occur.
3. Add onselectioncomplete listener, if count >1, map.disablemapnavigation();
4. Touch to select a point, touch and drag to move. Works great
5. Add ondoubletap listener above, leaving in step#3
6. Touch to select a point, touch and hold to move and map pans. Disablemapnavigation has fired, but for some reason, when you attach the doubletap listener, it breaks the "disable" part and the map is still navigating instead of moving the point.

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

JeffPace — Mon, 30 Jun 2014 12:04:08 GMT

didnt want this to get lost.. any ideas?

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

JeffPace — Sun, 12 Dec 2021 02:54:04 GMT

ok i figured out what is breaking.

By hooking to

on(map.container, tap.doubletap, lang.hitch(this, function(e){
            if(e.target.e_graphic){
    console.dir(e.target.e_graphic);
                       this.onLayerDblClick(e.target.e_graphic);
            }
          }));

i am successfully able to fire doubletap events

However that completely breaks single tap. I.e. I can no longer select a point by tapping on it.

I tried

   on(map.container, tap, lang.hitch(this, function(e){
            if(e.target.e_graphic){
     //returns FeatureLayer
              console.dir(e.target.e_graphic.getLayer());
    e.target.e_graphic.getLayer().click();
            }
          }));

to get the single click event to fire on single tap but no luck.