Hide Table of Contents
Image Layers
Edit without editor widget

Description

This sample shows how to work with the TemplatePicker, an out of the box widget that displays a gallery of templates from one or more feature layers. The template picker displays a symbol and label for each type in the feature layer. The editor widget uses the template picker to provide template based editing so in most cases you'll want to use the editor widget to take advantage of all the functionality the editor provides such as attribute editing, automatic updates, editing tools. In this example, the template picker is used without the editor so the developer is responsible for updating features after they are modified.

This snippet creates the template picker and specifies which layers to include and the number of rows and columns. The grouping option determines whether or not the templates are grouped by layer. If grouping is disabled you can use the auto option for the rows or columns options. Specifying auto lets the template picker automatically calculate the number of rows or columns.


var
templatePicker = new esri.dijit.editing.TemplatePicker({
featureLayers
: layers,
rows
: 3,
columns
: 12,
grouping
: true,
style
: "width: 1000px;"
}, "templatePickerDiv");
templatePicker
.startup();

To create new features select the desired template from the TemplatePicker then draw a new feature on the map. This sample uses the Draw toolbar to sketch the new feature then in the toolbar's onDrawEnd event the edits are saved by calling FeatureLayer.applyEdits().

dojo.connect(drawToolbar, "onDrawEnd", function(geometry) {
drawToolbar
.deactivate();
var newAttributes = dojo.mixin({},selectedTemplate.template.prototype.attributes);
var newGraphic = new esri.Graphic(geometry,null,newAttributes);
selectedTemplate
.featureLayer.applyEdits([newGraphic], null, null);
});


This sample also includes logic to delete features and edit vertices.The edit toolbar is activated when you double-click on a graphic. Double-clicking enables the edit toolbar with the EDIT_VERTICES constant and you'll see vertices and ghost vertices appear on the map. You can delete features by holding the CTRL key while clicking a graphic. The layer's onClick event checks to see if you've pressed the CTRL key, if so applyEdits is called and the selected graphic is added to the array of features to delete.

Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <!--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>Landuse</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
    <style>
      html, body {
        height: 100%;
        width: 100%;
        margin: 0; 
        padding: 0;
        overflow:hidden;
      }

      #header{
        border:solid 2px #462d44;
        background:#fff;
        color:#749749;
        -moz-border-radius: 4em;
        border-radius: 4em;
        font-size:14px;
        padding-left:20px;
        font-weight:700;
      }
      #map{
        padding:1px;
        border:solid 2px #462d44;
        -moz-border-radius: 4px;
        border-radius: 4px;
      }
      #rightPane{
        border:none;
        width:228px;
        height:95%;
        padding-bottom:10px;
      }
      .templatePicker {
        border:solid 2px #462d44 !important;
      }
    </style>

    <script>var dojoConfig = { parseOnLoad:true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.dijit.editing.TemplatePicker-all");

      var map;
      
      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";
        esri.config.defaults.io.alwaysUseProxy = false;
        
        //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: "streets",
          center: [-83.244, 42.581],
          zoom: 15
        });
        
        dojo.connect(map, "onLayersAddResult", initEditing);
        
        var landusePointLayer = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/6", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
        });
        var landuseLineLayer = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/8", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
        });
        var landusePolygonLayer = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/9", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
        });

        map.addLayers([landusePointLayer,landuseLineLayer,landusePolygonLayer]);
      }

      function initEditing(results) {
        var map = this;
        var currentLayer = null;
        var layers = dojo.map(results, function(result) {
          return result.layer;
        });

        var editToolbar = new esri.toolbars.Edit(map);
        dojo.connect(editToolbar, "onDeactivate", function(tool,graphic) {
          currentLayer.applyEdits(null, [graphic], null);
        });

        dojo.forEach(layers, function(layer) {
          var editingEnabled = false;
          dojo.connect(layer, "onDblClick", function(evt) {
            dojo.stopEvent(evt);
            if (editingEnabled === false) {
              editingEnabled = true;
              editToolbar.activate(esri.toolbars.Edit.EDIT_VERTICES , evt.graphic);
            } else {
              currentLayer = this;
              editToolbar.deactivate();
              editingEnabled = false;
            }
          });

          dojo.connect(layer, "onClick", function(evt) {
            dojo.stopEvent(evt);
            if (evt.ctrlKey === true) {  //delete feature if ctrl key is depressed
              layer.applyEdits(null,null,[evt.graphic]);
              currentLayer = this;
              editToolbar.deactivate();
              editingEnabled=false;
            }
          });
        });

        var templatePicker = new esri.dijit.editing.TemplatePicker({
          featureLayers: layers,
          rows: "auto",
          columns:2,
          grouping: true,
          style:"height:100%;overflow:auto;"
        }, "templatePickerDiv");

        templatePicker.startup();

        var drawToolbar = new esri.toolbars.Draw(map);

        var selectedTemplate;
        dojo.connect(templatePicker, "onSelectionChange", function() {
          if(templatePicker.getSelected()){
            selectedTemplate = templatePicker.getSelected();
          }
          switch (selectedTemplate.featureLayer.geometryType) {
            case "esriGeometryPoint":
              drawToolbar.activate(esri.toolbars.Draw.POINT);
              break;
            case "esriGeometryPolyline":
              drawToolbar.activate(esri.toolbars.Draw.POLYLINE);
              break;
            case "esriGeometryPolygon":
              drawToolbar.activate(esri.toolbars.Draw.POLYGON);
              break;
          }
        });

        dojo.connect(drawToolbar, "onDrawEnd", function(geometry) {
          drawToolbar.deactivate();
          editToolbar.deactivate();
          var newAttributes = dojo.mixin({},selectedTemplate.template.prototype.attributes);
          var newGraphic = new esri.Graphic(geometry,null,newAttributes);
          selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
        });
      }

      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters:true, design:'sidebar'" style="width:100%;height:100%;">
      <div data-dojo-type="dijit.layout.ContentPane"  id="header" data-dojo-props="region:'top'">Ctrl + click on graphic to delete.  Double click on graphic to edit vertices. </div>
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
      <div id="rightPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'">
        <div id="templatePickerDiv" ></div>
      </div>
    </div>
  </body>
</html>