ganeshssac

Template Picker Widget Not Updating

Discussion created by ganeshssac on Dec 5, 2013
Latest reply on Dec 9, 2013 by ganeshssac
Hi GIS folks
I have created a web application which allows users to select individual layers for web editing using the drop down menu list.

As soon as an user choose a layer, the feature layers renders on the map, but it doesn't get updated on the template picker widget.
Is there any way, we can modify this code below to update the template picker widget.

Any help on this regard, would be much appreciated.

<html lang="en">
   <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>Editable Points of Interest and Evacuation Map for Sheep Fire</title>

     <!-- include dojo theme -->
     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
     <style type="text/css">
       .dj_ie .infowindow .window .top .right .user .content { position: relative; }
       .dj_ie .simpleInfoWindow .content {position: relative;}
     </style>
     <style>
       html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow:hidden; }
       #leftPane{
         overflow:hidden;
         width:250px;
         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 type="text/javascript">
         djConfig = {
             parseOnLoad: true
         };
     </script>

     <!-- reference ArcGIS JavaScript API -->
     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
     <script type="text/javascript">
         //require selection dijit
         dojo.require("esri.map");
         dojo.require("esri.dijit.editing.Editor-all");
         dojo.require("dijit.layout.ContentPane");
         dojo.require("dijit.layout.BorderContainer");

         var map;
         var resizeTimer;
         var firePerimeter;
         var evacuationPerimeter;
         var pointsOfInterest;
         var fLayer, edLayer;
         var templatePicker, myEditor;

         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 = "/arcgisserver/apis/javascript/proxy/proxy.ashx";

             //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://sampleserver3.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer");


             var initialExtent = new esri.geometry.Extent({ "xmin": -117.66, "ymin": 34.19, "xmax": -117.41, "ymax": 34.37, "spatialReference": { "wkid": 4326 } });
             map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(initialExtent), slider: false, nav: true });

             dojo.connect(map, "onLoad", function () {
                 dojo.connect(dijit.byId('map'), 'resize', function () {
                     resizeMap();
                 });
             });

             dojo.connect(map, "onLayersAddResult", initEditor);

             var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
             map.addLayer(basemap);

              pointsOfInterest = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/0", {
                 mode: esri.layers.FeatureLayer.MODE_ONDEMAND, //QUERY_SELECTION is working as well
                 outFields: ['*']
             });

              evacuationPerimeter = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/1", {
                  mode: esri.layers.FeatureLayer.MODE_ONDEMAND, //QUERY_SELECTION is working as well
                  outFields: ['*']
              });

             firePerimeter = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/2", {
                 mode: esri.layers.FeatureLayer.MODE_ONDEMAND, //QUERY_SELECTION is working as well
                 outFields: ['*']
             });

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

         function fireEd() {

             //alert("fireEd");   
             //map.removeAllLayers();
             if (fLayer) {
                 map.removeLayer(fLayer);
             }
             //dojo.connect(map, "onLayersAddResult", initEditor);
             var myLyrList = document.getElementById("myList");
             edLayer = myLyrList.options[myList.selectedIndex].text;
             //alert(myLyrList.options[myList.selectedIndex].value);   
             switch (myLyrList.options[myList.selectedIndex].value) {
                 case "0":
                     fLayer = pointsOfInterest;
                     break;
                 case "1":
                     fLayer = evacuationPerimeter;
                     break;
                 case "2":
                     fLayer = firePerimeter;
                     break;
             }

         
             map.addLayers([fLayer]);
            
         }
         

         function initEditor(results) {


             if (templatePicker) {
                 templatePicker.destroy();
                 dojo.create("div", { id: "templateDiv" }, "leftPane");
             }
             if (myEditor) {
                 myEditor.destroy();
                 dojo.create("div", { id: "editorDiv" }, "leftPane");
             }

             //alert("initEditor");
             for (var i = 0; results[i]; i++) {
                 if (results[i].layer.name == edLayer) {
                     results = [results[i]];
                 }
             }
             //results = [results[0]];
             var templateLayers = dojo.map(results, function (result) {
                 //alert(result.layer.name);
                 return result.layer;
             });


             var layers = dojo.map(results, function (result) {
                 return { featureLayer: result.layer };
             });
            
             var templatePicker = new esri.dijit.editing.TemplatePicker({
                 featureLayers: templateLayers,
                 grouping: true,
                 rows: 'auto',
                 columns: 3
             }, 'templateDiv');
             templatePicker.startup();

             var settings = {
                 map: map,
                 templatePicker: templatePicker,
                 enableUndoRedo: true,
                 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: true,
                     mergeVisible: true
                 }
             };
             var params = { settings: settings };

             var editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');
             editorWidget.startup();
         }
         //Handle resize of browser
         function resizeMap() {
             clearTimeout(resizeTimer);
             resizeTimer = setTimeout(function () {
                 map.resize();
                 map.reposition();
             }, 500);
         }
         dojo.addOnLoad(init);
     </script>
   </head>
   <body class="claro">    
     <div dojotype="dijit.layout.BorderContainer" design="headline" style="width:100%;height:100%;">
       <div dojotype="dijit.layout.ContentPane"  id="header" region="top">Editable Fire Map</div>
       <div id="map" dojotype="dijit.layout.ContentPane" region="center"></div>
       <div id="leftPane" dojotype="dijit.layout.ContentPane"  region="left">

            <select id="myList" onchange="fireEd()">
     <option value="">Choose layer to edit</option> 
           <option value="0">Points of Interest</option> 
                 <option value="1">Evacuation Perimeter</option> 
                <option value="2">Fire Perimeter</option> 
        </select><br><br>

         <div id="templateDiv"></div>
         <div id="editorDiv"></div>
       </div>
     </div>
   </body>
 </html>

Outcomes