Select to view content in your preferred language

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

2798
18
06-17-2014 07:21 PM
joewang
Emerging Contributor
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).
0 Kudos
18 Replies
JeffPace
MVP Alum
Esri JavaScript API is built on dojo. Dojo handles double tap just fine

http://dojotoolkit.org/reference-guide/1.10/dojox/gesture.html
0 Kudos
joewang
Emerging Contributor
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);
           }));
0 Kudos
JeffPace
MVP Alum
that is the exact code that i want to use, that doesn't work, that i was hoping jon could check on.
0 Kudos
JonathanUihlein
Esri Regular Contributor
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>


0 Kudos
JeffPace
MVP Alum
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?
0 Kudos
JonathanUihlein
Esri Regular Contributor

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.
0 Kudos
JeffPace
MVP Alum
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.
0 Kudos
JeffPace
MVP Alum
didnt want this to get lost.. any ideas?
0 Kudos
JeffPace
MVP Alum
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.
0 Kudos