ipeebles

Looking to disable edit mode of template picker after first feature is added

Discussion created by ipeebles on Sep 3, 2013
Latest reply on Sep 4, 2013 by khutchins-esristaff
I am looking at an ESRI sample and I like the functionality of the template picker.  However, the sample I posted below allows the user to keep adding features to the map as long as the feature from the template picker is selected.  My preference is to click on the feature from the template picker, add it to the map, then disable the edit mode (add feature to the map).  I prefer having to click on the feature from the template picker each time I need to add a feature to the map, that way I am not in constant editing mode.

I thought maybe using something like .deactivate(); or .destroy() would work?

Code is posted below.  Any assistance is greatly appreciated.

<!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>Editable Points of Interest and Evacuation Map for Sheep Fire</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;
        background:#fff;
      }

      #map{
        border: solid 1px #232416;
        padding:0;
      }
      #leftPane{
        width:200px;
        border:none;
      }
    </style>

    <script>var dojoConfig = { parseOnLoad:true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
    <script>
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("esri.map");
      dojo.require("esri.dijit.editing.Editor-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";
        
        //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.735, 34.356],
          zoom: 13, 
          slider: false
        });
        
        dojo.connect(map, "onLayersAddResult", initiateEditor);
        
        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: ['*']
        });

        map.addLayers([pointsOfInterest]);
      }

   // EDITOR - ADD FEATURE
      function initiateEditor(results) {
        var templateLayers = dojo.map(results,function(result){
          return result.layer;
        });
  
        var editingAddFeature = new esri.dijit.editing.TemplatePicker({
          featureLayers: templateLayers,
          rows: 'auto',
          columns: 'auto',
          style:'height:85%;width:98%;'
        },'templatePickerDiv');
        
        editingAddFeature.startup();
        var settings = {
          templatePicker: editingAddFeature,
          map: map,
        }
        var params = {settings: settings};
        var myEditor = new esri.dijit.editing.Editor(params);
    }
 
   

      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'">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>
    </div>
  </body>
</html>

Outcomes