<!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>
Esri JavaScript API is built on dojo. Dojo handles double tap just fine
http://dojotoolkit.org/reference-guide/1.10/dojox/gesture.html
that is the exact code that i want to use, that doesn't work, that i was hoping jon could check on.
on(map.container, tap, function(e){ if(e.target.e_graphic){ console.log("tapped graphic"); } });
<!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>
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"); } }));
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?
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); } }));
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(); } }));