Template Picker Widget Not Updating

GaneshSolai_Sambandam · ‎12-05-2013

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++) {
                 if (results.layer.name == edLayer) {
                     results = [results];
                 }
             }
             //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>

GaneshSolai_Sambandam · ‎12-09-2013

IN my last thread, I posted that my template picket widget was not updating when I a choose a different layer from the drop down menu. But, however, I found a way to update the template picker and editor widget. But, the only problem I am now facing is that my application works fine with Chrome and Firefox browser, but not the Internet explorer. Any experienced GIS developer's or expert , can you please run my code below and see what is the problem please. It is quite urgent. Any help would be greatly apprecitated.

[HTML]<html lang="en">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     
     <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" 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>

     
     <script type="text/javascript">
         djConfig = {
             parseOnLoad: true
         };
     </script>

     
     <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;
         var editLayers;
         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 = "/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) {

             editLayers = dojo.map(results, function (result) {
                 return {
                     'featureLayer': result.layer
                 };
             });
             createEditor();
         }
         //Functions to create and destroy the editor. We do this each time the edit button is clicked.
         function createEditor() {

             if (editorWidget) {
                 editorWidget.destroy();
                 editorWidget = null;
                // return;
             }
             if (editLayers.length > 0) {
                 //create template picker
                 var templateLayers = dojo.map(editLayers, function (layer) {
                     return layer.featureLayer;
                 });

                 var eDiv = dojo.create("div", {
                     id: "templDiv"
                 });
                 dojo.byId('leftPane').appendChild(eDiv);
                 var editLayerInfo = editLayers;
                 var templatePicker = new esri.dijit.editing.TemplatePicker({
                     featureLayers: templateLayers,
                     rows: 'auto',
                     columns: 'auto',
                   // style: 'height:98%;width:98%;'
                 }, 'templDiv');
                 templatePicker.startup();

                 var settings = {
                     map: map,
                     templatePicker: templatePicker,
                     layerInfos: editLayerInfo,
                     toolbarVisible: true
                 };
                 var params = {
                     settings: settings
                 };
                 var eDiv1 = dojo.create("div", {
                     id: "editDiv"
                 });
                 dojo.byId('leftPane').appendChild(eDiv1);
                 editorWidget = new esri.dijit.editing.Editor(params, "editDiv");
                 editorWidget.startup();
             }

         }

         function destroyEditor() {
             if (editorWidget) {
                 editorWidget.destroy();
                 editorWidget = null;
             }

         }




         //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>

            <input type="button" onclick="createEditor();" value="Create Editor" disabled/>
        <input type="button" onclick="destroyEditor();" value="Destroy Editor"disabled/>

         <div id="templateDiv"></div>
         <div id="editorDiv"></div>
       </div>
     </div>
   </body>
</html>[/HTML]