Cant move point on touch device

JeffPace · ‎08-08-2014

Using javascript api 3.10 (tried 3.9 also). Everything works on desktop. but i cant seem to Move a point in the editor widget.

I had this working, and I am not sure if an iOS update broke it or what. Its impossible to debug on ipads.

So I select a point by tapping it. It selects fine. If i try to drag it, the map pans. IF i tap hold, i get a magnifying window.

So i

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

To disable mapnav on touch if a point is selected.

But if i try to move it, nothing happens.

anybody?

Jonathan Uihlein‌

JonathanUihlein · ‎08-08-2014

Hey Jeff,

Can you provide a specific sample where you are seeing this behavior?

I just created a quick sample from scratch and it looks to be working on both ipad and iphone.

Sample code has been attached.

JeffPace · ‎08-08-2014

I dont see an attachment.

It looks like any hooking into the tap event, or disabling mapnav (to prevent panning) seems to break it. I will try and post a sample

JonathanUihlein · ‎08-11-2014

Hey Jeff,

Just double checking that you don't see an attachment in my previous post (editor_mobile.html.zip‌ ).

If not, looks like a bug with GeoNet.

Code below:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Default Editor</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <style>
      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
      }

      body {
        background-color: #fff;
        overflow: hidden;
        font-family: Helvetica, san-serif;
      }

      #templatePickerPane {
        width: 225px;
        overflow: hidden;
      }

      #panelHeader {
        background-color: #92A661;
        border-bottom: solid 1px #92A860;
        color: #FFF;
        font-size: 12px;
        height: 14px;
        line-height: 12px;
        margin: 0;
        overflow: hidden;
        padding: 10px 10px 10px 10px;
      }

      #map {
        margin-right: 5px;
        padding: 0;
      }

      .esriEditor .templatePicker {
        padding-bottom: 5px;
        padding-top: 5px;
        height: 500px;
        border-radius: 0px 0px 4px 4px;
        border: solid 1px #92A661;
      }

    </style>

    <script src="http://js.arcgis.com/3.10/"></script>
    <script>
      var map, editorWidget;
      require([
        "esri/config",
        "esri/map",
        "esri/SnappingManager",
        "esri/dijit/editing/Editor",
        "esri/layers/FeatureLayer",
        
        "dojo/has",
        "dojo/dom-construct",
        "dojo/keys",
        "dojo/on",
        "dojo/parser",
        "dojo/_base/array",
        "dojo/i18n!esri/nls/jsapi",

        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
        
      ], function (
        esriConfig, Map, SnappingManager, Editor, FeatureLayer,
        has, domConstruct, keys, on, parser, arrayUtils, i18n
      ) {
      
        alert(has("touch"));
        console.log(has("touch"));

        parser.parse();

        map = new Map("map", {
          basemap: "topo",
          center: [-117.198, 34.049],
          zoom: 14
        });
        
        map.on("layers-add-result", initEditing);

        var fLayer = new FeatureLayer("http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/Energy/HSEC/FeatureServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });
        
        fLayer.on("selection-complete", function(graphics){  
          if(fLayer.getSelectedFeatures().length>0){  
            if(has('touch')){  
              map.disableMapNavigation();  
            }
            fLayer.redraw();  
          }else{  
            if(has('touch')){  
              map.enableMapNavigation();  
            }
          }  
        });
        
        map.addLayers([fLayer]);
        map.infoWindow.resize(400, 300);

        function initEditing (event) {
        
          if(editorWidget){
              editorWidget.destroy();
          }
        
          var featureLayerInfos = arrayUtils.map(event.layers, function (layer) {
            return {"featureLayer": layer.layer};
          });

          var settings = {"map" : map, "layerInfos" : featureLayerInfos};
          var params = {"settings": settings};
          
          editorWidget = new Editor(params, "editorDiv");
          var options = {"snapKey": keys.copyKey};
          map.enableSnapping(options);
          editorWidget.startup();
        }
      });
    </script>
  </head>
  
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" id="templatePickerPane" data-dojo-props="region:'bottom'" style="height:20%">
        <div id="panelHeader">
          Default Editor
        </div>
        <div style="padding:10px;" id="editorDiv">
        </div>
      </div>
    </div>
  </body>
</html>