Simple editing using an ArcGIS Online web map





Install Atom behind corporate proxy 08th July, 2016

Crossfit Regions – ArcGIS web map style. 11th April, 2012

ArcGIS Online

Simple editing using an ArcGIS Online web map

Posted on .

This post will describe simple editing using the Esri JavaScript API and an ArcGIS Online web map.


view it live

There are plenty of samples  covering how to edit using the Esri JavaScript API. Where I find the documentation runs short is using the samples with a web map authored in ArcGIS Online. Lucky for us there are sample templates that you can use and download from within ArcGIS Online and this means that we can easily take a look at the code and gather the logic that we need.

For this sample I wanted to accomplish a few things:

  • Consume a sweet web map from ArcGIS Online
  • Enable editing
  • Use buttons I made online.

Why use buttons for starting and stopping? Again, I made some sweet buttons and wanted to use them. This may not be the most usable in your real life application and I usually try to remove as many buttons as possible and keep the applications as focused.

There are really only a handful of functions worth talking about.

initMap does the same logic as any sample. It creates a deferred from the web map and gets us rolling.

I then hook up those killer buttons I made.

on(dom.byId("start"), 'click', lang.hitch(this, 'initEditor'));
on(dom.byId("stop"), 'click', lang.hitch(this, 'destroyEditor'));

Notice I am using on and not dojo.connect. More of that should be coming in future versions of the JavaScript API. In fact this sample is using AMD syntax and it makes coding JavaScript much better. Right now I can use it as I am simply hooking up a dom element to a function. You will also see that I am using lang.hitch to preserve the scope I want sent to the function.

Moving right along we will create the editor.

initEditor: function(){

var editLayers = this.editableLayers(this.opLayers);
console.log("editLayers" + editLayers)
if(editLayers.length > 0){

var templateLayers =, function (layer) {
return layer.featureLayer;

var eDiv = domConstruct.create("div",{id:"editorDiv"},'templatePickerPane');

var editLayerInfo = editLayers;

var templatePicker = new esri.dijit.editing.TemplatePicker({
featureLayers: templateLayers,
rows: 'auto',
columns: 2,
grouping: false,
showTooltip: true,
style: 'height:400px;width:' + '100%;'
}, 'editorDiv');
var settings = {
templatePicker: templatePicker,
layerInfos: editLayerInfo,
toolbarVisible: false
var params = {
settings: settings
this.editorWidget = new esri.dijit.editing.Editor(params);

editableLayers: function(layers){
var layerInfos = [];
array.forEach(layers, function (mapLayer, index) {
if (mapLayer.layerObject) {
if (mapLayer.layerObject.isEditable) {
if (mapLayer.layerObject.isEditable()) {
'featureLayer': mapLayer.layerObject
return layerInfos;


This is the neat part. Since we are using a web map we need to find our editable layers. This can be found in the json from the feature service.


If the layer is editable we want to include it in the widget. This is really the only difference between working with a web map and the old school way of going straight to the service. The layers are added for us and we need to take a step back and gather the info needed for our app. The JavaScript API makes all of this possible and using a web map can be a real time saver.

Browse through the source code and please feel free to ask questions.




Author Tony Courter

Posted at 11:02 am September 9, 2014.


Nice blog! I ran across it searching for a solution to my own issue, and it seems to me that you might have some insight to a solution, and/or a workaround to it.

Here Goes; I’m using the 3.10 EditorWidget to edit a SDE point based feature Class that represents beetle infestations. I’ve created JavaScript/jQuery listeners on the dijit_form controls that are portrayed in the attribute inspector. All works fine, I can edit existing records, and create multiple new ones as long as I dismiss the attribute inspector by a map click as opposed to using the ‘Close’ Button.

When I use the close button, the id (indexes) of the dijit_form objects change (e.g. if there are 12, starting with _0, the next time I add a new record, the first digit_form object has an id of dijit_form_NumberTextBox_12 instead of what my JavaScript file is anticipating, which is dijit_form_NumberTextBox_0. This occurs with all the dijit_form objects portrayed in the attribute inspector.

I’m obviously misunderstanding something basic here, or foolishly trying to do something that is not recommended.

Any recommendations as to best practice would be welcome. At this point I’d also be satisfied for the time being by just removing the close button

Thank You!

// Sample of the Listener on # of Trees
$(document).on(‘change’, ‘#dijit_form_NumberTextBox_3’, function () {
if ($(‘#dijit_form_NumberTextBox_0’).val() == 0 || $(‘#dijit_form_NumberTextBox_0’).val() == “”) {


Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (1) ...