Hide Table of Contents
Latest Samples
Image Layers
Editor widget

Description

This sample shows how to edit multiple feature layers using the Editor widget.The editor widget is highly customizable, developers can add and remove functionality depending on their editing use case. This sample creates an editable fire map that allows end users to add points of interest or evacuation zones.

To define the desired functionality create a settings object and specify which tools and capabilities the application needs. In this snippet of code from the settings object, the editing toolbar is turned on and several tools are enabled such as the ability to draw freehand polygons and the reshape tool.

var settings = {
map: map,
geometryService: new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer"),
layerInfos:layers,
toolbarVisible: true,
showAttributesOnClick: true,
createOptions: {
polygonDrawTools: [ esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYGON,
esri.dijit.editing.Editor.CREATE_TOOL_AUTOCOMPLETE]
},
toolbarOptions: {
reshapeVisible: true,
cutVisible: false,
mergeVisible: false
}
};

After defining the desired functionality you pass the settings to the params object then pass that into the Editor's constructor.

var params = {settings: settings};
var myEditor = new esri.dijit.editing.Editor(params,'divFeatureServiceDijit');
myEditor.startup();

It is recommended that you create a geometry service for use within your applications. View the Geometry Services help topic in the Server Resource Center for details on creating and publishing a geometry service. ESRI hosts a geometry service on sampleserver3 to support samples published in the Resource Center. You are welcome to use this service for development and testing purposes. ESRI also hosts a geometry service on tasks.arcgisonline.com this service can be used for production applications however, we do not guarantee that the service will be available 24/7.

Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Edit Fire Perimeters</title>

    <!-- include dojo theme -->
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
    <style>
      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}

      html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow:hidden; }
      #leftPane{
        width:255px;
        border:none;
      }
      #map{
        padding:0;
      }
      #header{
        font-weight:600;
        font-size:14pt;
        color:#666666;
        padding-left:20px;
      }
    </style>

    <!-- specify dojo configuration to parse dijits at load time -->
    <script>var dojoConfig = { parseOnLoad:true };</script>
    <!-- reference ArcGIS JavaScript API -->
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      //require selection dijit
      dojo.require("esri.map");
      dojo.require("esri.dijit.editing.Editor-all");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.form.CheckBox");
      dojo.require("dijit.Toolbar");
      dojo.require("esri.SnappingManager");
      
      var map;
      var editorWidget;
      
      function init() {
     
        //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to  
        //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic 
        //for details on setting up a proxy page.
        esri.config.defaults.io.proxyUrl = "/proxy";
        
        //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications. 
        esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
                
        map = new esri.Map("map", { 
          basemap: "topo",
          center: [-117.535, 34.28],
          zoom: 12,
          slider: false
        });
        
        dojo.connect(map, "onLayersAddResult", initEditor);
        
        var pointsOfInterest = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND, //QUERY_SELECTION is working as well
          outFields: ['*']
        });

        var WildfireLine = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/1",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND, //QUERY_SELECTION is working as well
          outFields: ['*']
        });
		
        var evacuationPerimeter = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/2",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND, //QUERY_SELECTION is working as well
          outFields: ['*']
        });

        map.addLayers([pointsOfInterest,WildfireLine,evacuationPerimeter]);
      }

      function initEditor(results) {
     
       //build the layer and field information for the layer, display the description field
        //using a text area.
        var layers = dojo.map(results, function(result) {
          var fieldInfos= dojo.map(result.layer.fields,function(field){
            if(field.name === 'description'){
              return {'fieldName': field.name,'label':'Details',stringFieldOption:esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA}
            }
            else{
              return {'fieldName': field.name,'lable':field.alias}
            }
          });
          return {featureLayer:result.layer,'fieldInfos':fieldInfos}
        });

        var settings = {
          map: map,
          enableUndoRedo:true,
          layerInfos:layers,
          toolbarVisible: true,
          createOptions: {
            polygonDrawTools: [ 
              esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYGON,
              esri.dijit.editing.Editor.CREATE_TOOL_AUTOCOMPLETE
            ]
          },
          toolbarOptions: {
            reshapeVisible: true,
            cutVisible: true,
            mergeVisible: true
          }
        };
        var params = {settings: settings};

        editorWidget = new esri.dijit.editing.Editor(params,'editorDiv');
        
        //Dojo.keys.copyKey maps to CTRL in Windows and CMD in Mac
        map.enableSnapping({snapKey:dojo.keys.copyKey});
 
        //create a new checkbox to enable/disable snapping
        var checkBox = new dijit.form.CheckBox({
          name: "chkSnapping",
          checked:true,
          id: "chkSnapping",
          label:"Snapping",
          showLabel:"false",
          title:"Snapping",
          onChange: function(evt) {
            console.log(this.checked);
            if(this.checked){
              map.enableSnapping({snapKey:dojo.keys.copyKey});
            } else {
              map.disableSnapping();
            }
          }
        });
  
        //add the snapping checkbox to the editor's toolbar 
        var myToolbarElement = dojo.query(".esriDrawingToolbar",editorWidget.domNode)[0];
        var myToolbar = dijit.byId(myToolbarElement.id);       

        myToolbar.addChild(new dijit.ToolbarSeparator());
        myToolbar.addChild(checkBox);
        
        editorWidget.startup();
        
        //listen for the template pickers onSelectionChange and disable
        //the snapping checkbox when a template is selected
        var templatePickerElement = dojo.query(".esriTemplatePicker",editorWidget.domNode)[0];
        var templatePicker = dijit.byId(templatePickerElement.id);
        dojo.connect(templatePicker,"onSelectionChange",function(){
          if (templatePicker.getSelected()) {
            //disable the snapping checkbox
            dijit.byId('chkSnapping').set("disabled",true);
          } else {
            dijit.byId('chkSnapping').set("disabled",false);    
          }
        });
        map.infoWindow.resize(325,200);
      }
  
      dojo.ready(init);
    </script>
  </head>
  <body class="claro">    
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;">
      <div data-dojo-type="dijit.layout.ContentPane"  id="header" data-dojo-props="region:'top'">Editable Fire Map</div>
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
      <div id="leftPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'">
        <div id="templatePickerDiv"></div>
        <div id="editorDiv">
        </div>
      </div>
    </div>
  </body>
</html>