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>
Solved! Go to Solution.
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]);
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]);
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.
I have a copy of your code running locally and I don't get that error. Which browser?
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.