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