AnsweredAssumed Answered

How can I use the editor widget on an iPad?

Question asked by csergent08 Champion on Dec 8, 2014
Latest reply on Dec 9, 2014 by csergent08

I want to be able to touch on the editor template chooser and then touch on an iPad to create a new point to edit. Is there a way to do this with this widget on an iPad?

 

Here is my current code that works on a pc:

<!DOCTYPE html>

<html>

    <head>

        <title>Decatur Graphics Editor</title>

        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">

        <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/soria/soria.css">

        <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

 

 

        

        <style>

            html, body, #mapDiv

            {

                padding:0;

                margin:0;

                height:100%;

                width:100%;

                position:absolute;

                z-index:0;

            }

           

                     

           

           

            /* Editor style begin */

           

            #templatePickerPane {

                width: 250px;

                height:260px;

                overflow: hidden;

                z-index:50;

                top:50%;

                right:0%;

                position:absolute;

            }

           

            #panelHeader

            {

                background-color: #92A661;

                border-bottom: solid 1px #92A860;

                color: #FFF;

                font-size: 18px;

                height: 50px;

                line-height: 22px;

                margin: 0;

                overflow: hidden;

                padding: 10px 10px 10px 10px;

               

            }

           

                       

            #editorDiv

            {

                background-color:White;

                padding:10px;

            }

 

 

             

              .esriEditor .templatePicker

            {

                padding-bottom: 5px;

                padding-top: 5px;

                height: 120px;

                border-radius: 0px 0px 4px 4px;

                border: solid 1px #92A661;

            }

 

 

              .dj_ie .infowindow .window .top .right .user .content, .dj_ie .simpleInfoWindow .content

            {

                position: relative;

            }

           

            /* Editor Style End */

           

           

            #closeEditor

            {

                position:absolute;

                right:5%;

            }

           

            #editor

            {

                height:20px;

                width:20px;

                position:absolute;

                top:285px;

                left:20px;

                z-index:50;

                padding: 5px 6px 6px 6px;

                background-color:#f9f8f8;

                border-radius:5px;

                visibility:visible;

            }

           

           

    </style>

     

       

        <script src="http://js.arcgis.com/3.11/" type="text/javascript"></script>

               

        <script type="text/javascript">

       

            var map;

            require(["esri/map", "esri/config",

                     "esri/geometry/Extent",

 

 

                     "esri/dijit/editing/Editor",

 

 

                     "esri/layers/ArcGISDynamicMapServiceLayer",

                     "esri/layers/ArcGISTiledMapServiceLayer",

                     "esri/layers/FeatureLayer",

 

 

                     "esri/SnappingManager",

 

 

                     "esri/tasks/GeometryService",

 

 

                     "esri/toolbars/draw",

 

 

                     "dojo/dom",

                     "dojo/keys",

                     "dojo/on",

                     "dojo/parser",

                     "dojo/_base/array",

                     "dojo/i18n!esri/nls/jsapi",

                     "dojo/dnd/Moveable",

                     "dojo/domReady!"], function (Map, esriConfig, Extent, Editor, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer,

                                                  FeatureLayer, SnappingManager, GeometryService, Draw, dom, keys, on, parser, arrayUtils, i18n, Moveable

            ) {

 

 

                         parser.parse();

 

 

                         //snapping is enabled for this sample - change the tooltip to reflect this

                         i18n.toolbars.draw.start += "<br/>Press <b>CTRL</b> to enable snapping";

                         i18n.toolbars.draw.addPoint += "<br/>Press <b>CTRL</b> to enable snapping";

 

 

 

 

                         /* The proxy comes before all references to web services */

                         /* Files required for security are proxy.config, web.config and proxy.ashx

                         - set security in Manager to Private, available to selected users and select Allow access to all users who are logged in

                         (Roles are not required)

                         /*

                         The proxy section is defined on the ESRI sample. I have included it as

                         part of the documentation reads that the measuring will not work.

                         I thought that might be important.

                         */

 

 

                         // Proxy Definition Begin

                         //identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.

                         //If this null or not available the project and lengths operation will not work.

                         // Otherwise it will do a http post to the proxy.

                         esriConfig.defaults.io.proxyUrl = "proxy.ashx";

                         esriConfig.defaults.io.alwaysUseProxy = true;

 

 

                         // Proxy Definition End

 

 

                         // declare geometry service

                         esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");

 

 

                         // set custom extent

                         var initialExtent = new Extent({

                             "xmin": 777229.03,

                             "ymin": 1133467.92,

                             "xmax": 848340.14,

                             "ymax": 1185634.58,

                             "spatialReference": {

                                 "wkid": 3435

                             }

                         });

 

 

                         // create map and set slider style to small

                         map = new Map("mapDiv", {

                             showAttribution: false,

                             sliderStyle: "small",

                             extent: initialExtent,

                             logo:false

                         });

 

 

                         // Starts initEditing after the feature layer(s) have been added

                         map.on("layers-add-result", initEditing);

 

 

                         // add imagery

                         var tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

                         map.addLayer(tiled);

                         // set operational layers

                         var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

                         // add operational layers

                         map.addLayer(operationalLayer);

 

 

                         // add point feature layer for editing

                         var pointFeatureLayer = new FeatureLayer("http://maps.decaturil.gov/arcgis/rest/services/Test/FeatureServer/0", {

                             mode: FeatureLayer.MODE_ONDEMAND,

                             outFields: ["*"]

                         });

 

 

 

 

                         map.addLayers([pointFeatureLayer]);

 

 

 

 

                         // sizes the edit window

                         map.infoWindow.resize(400, 300);

 

 

                         // settings for the editor widget

                         function initEditing(event) {

                             var featureLayerInfos = arrayUtils.map(event.layers, function (layer) {

                                 return {

                                     "featureLayer": layer.layer

                                 };

                             });

 

 

                             var settings = {

                                 map: map,

                                 layerInfos: featureLayerInfos,

                                 toolbarVisible:true,

                                 enableUndoRedo :true,

                                 maxUndoOperations:20

                             };

                             var params = {

                                 settings: settings

                             };

                             var editorWidget = new Editor(params, 'editorDiv');

                             editorWidget.startup();

 

 

                             var options = { snapKey: keys.copyKey };

                             map.enableSnapping(options);

                         }

 

 

 

 

                         // Allow editor to move with mouse

                         on(Moveable(dom.byId("templatePickerPane")), "onmousedown", function () {

                             var dnd = new Moveable(dom.byId("templatePickerPane"));

                         });

 

 

 

 

                         // Hide editor

                         on(dom.byId("closeEditor"), "click", function () {

                             document.getElementById("templatePickerPane").style.visibility = 'hidden';

                         });

 

 

 

 

                         // Show Editor

                         on(dom.byId("showEditorWidget"), "click", function () {

                             document.getElementById("templatePickerPane").style.visibility = 'visible';

                         });

 

 

                     }

 

 

 

 

            );

        </script>

    </head>

    <body class="soria">

      <div id="mapDiv">

        <div id="editor">

            <input type="image" id="showEditorWidget" src="images/edit.ico" alt="Editor" title="Editor" />

        </div>

       </div>

      <div id="templatePickerPane">

     

      

        <div id="panelHeader">

          <p>Default Editor     <input type="image" id="closeEditor" src="images/close.ico" alt="Close Editor" title="Close Editor" /></p>

         

        </div>

        <div id="editorDiv">

           

        </div>

      </div>

  </body>

     

   

</html>

Outcomes