Why isn't my editor widget working?

2570
4
Jump to solution
12-02-2014 09:24 AM
ChrisSergent
Regular Contributor III

I wrote code for an editor widget based on this page: Default editing widget | ArcGIS API for JavaScript

It looks like I have all the required information in my code, but I don't see my symbols displaying in the editorDiv and I can not edit the symbols on the feature layer on the map. The feature layer is set up for editing. I don't receive any errors in Google Chrome.

Any ideas what is wrong with this code:

<!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: 200px;

                height:300px;

                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: 24px;

                line-height: 22px;

                margin: 0;

                overflow: hidden;

                padding: 10px 10px 10px 10px;

               

            }

           

            #editorDiv

            {

                background-color:White;

            }

             

              .esriEditor .templatePicker

            {

                padding-bottom: 5px;

                padding-top: 5px;

                height: 500px;

                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 */

           

    </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

                         });

                         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

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

                             mode: FeatureLayer.MODE_ONDEMAND,

                             outFields: ["*"]

                         });

                         map.addLayer(pointFeatureLayer);

                         map.infoWindow.resize(400, 300);

                         function initEditing(event) {

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

                                 return {

                                     "featureLayer": layer.layer

                                 };

                             });

                             var settings = {

                                 map: map,

                                 layerInfos: featureLayerInfos

                             };

                             var params = {

                                 settings: settings

                             };

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

                             editorWidget.startup();

                             var options = { snapKey: keys.copyKey };

                             map.enableSnapping(options);

                         }

                     }

            );

        </script>

    </head>

    <body class="soria">

      <div id="mapDiv">

      </div>

      <div id="templatePickerPane">

        <div id="panelHeader">

          Default Editor

        </div>

        <div style="padding:10px;" id="editorDiv">

           

        </div>

      </div>

     

  </body>

     

   

</html>

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

In your code initEditing is never executed because the app is setup to call initEditing when the map's layers-add-result event is fired. This event is only fired when layers are added to the map using the addLayers method. In your code you are using map.addLayer instead. Try changing the line of code that adds your point layer to the following:

        map.addLayers([pointFeatureLayer]);

View solution in original post

4 Replies
KellyHutchins
Esri Frequent Contributor

In your code initEditing is never executed because the app is setup to call initEditing when the map's layers-add-result event is fired. This event is only fired when layers are added to the map using the addLayers method. In your code you are using map.addLayer instead. Try changing the line of code that adds your point layer to the following:

        map.addLayers([pointFeatureLayer]);

ChrisSergent
Regular Contributor III

Okay I changed that and I do have an error now: TypeError: Unable to draw graphic (geometry:null, symbol:null): undefined is not a functionmessage: "Unable to draw graphic (geometry:null, symbol:null): undefined is not a function"stack: (...)get stack: function () { [native code] }set stack: function () { [native code] }__proto__: Error "TypeError: Unable to draw graphic

I was thinking that the error is telling me that I don't have a symbol defined. Is there something that I am missing in my web service: Layer: Test Points (ID: 0)

And here is my geometry service: Utilities/Geometry (GeometryServer)

Also I clicked on ArcGIS.com Map and the points are editable and I can add new ones as well.

0 Kudos
KellyHutchins
Esri Frequent Contributor

I have a copy of your code running locally and I don't get that error. Which browser?

ChrisSergent
Regular Contributor III

I tried adding my dynamic layer and my tiled layer with the feature layer in add layers. It didn't like that. Once I just added just the feature layer in the map.addLayers, it worked. Thanks again.

0 Kudos