Latest Contributions by IanPeebles

Ian, This type of capability is currently not documented for the Editor widget. In general the Editor widget is designed to be used as a whole. You can customize various options such as which tools display on the toolbar and that is documented. Also, all I want to do is disable the attributes editor for the template picker and editor widget.  Surely there is a way to do this?  The reason being, I do not want users adding in features and the attributes coming up at all times.  I want to use all of the functionality except for the attributes editor.  Is it possible to disable the editor widget?  If so, can I do this under toolbarOptions? For instance, I can add the following tools under the toolbar options. mergeVisible: true, cutVisible: true ... View more

Haven't tested it fully but you might try passing in an attribute inspector that isn't displayed when you create the editor.   Something like this:           var layers = arrayUtils.map(evt.layers, function(result) {             return { featureLayer: result.layer };           });          var attributeInspector = new AttributeInspector({layerInfos: layers}, dojo.create("div"));           var settings = {             attributeInspector: attributeInspector,             map: map,             templatePicker: templatePicker,             layerInfos: layers,             toolbarVisible: true,             createOptions: {               polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],               polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,                 Editor.CREATE_TOOL_CIRCLE,                 Editor.CREATE_TOOL_TRIANGLE,                 Editor.CREATE_TOOL_RECTANGLE               ]             },             toolbarOptions: {               reshapeVisible: true             }           }; I will have a look at this, but is there any documentation on how the editor widget can be customized?  Surely, I can disable functionality that I do not want with the editor widget and template picker. ... View more

The Editor widget is comprised of a bunch of other widgets including the: TemplatePicker, AttributeInspector, Edit Toolbar etc. If you don't want the attribute inspector to display take a look at the Editing without the Editor sample. This sample shows how to use the individual components of the Editor that you are interested in to edit features. https://developers.arcgis.com/en/javascript/jssamples/ed_feature_creation.html Kelly, this is sort of what I am looking for, but I need to be able to select features, add to selection, then delete selected features.  Also, I need to be able to move and modify features. I was looking at using this existing widget because it does that already.  Are there any other options? ... View more

I have a query task that then populates a datagrid with the results. I'd like to be able to zoom to a particular feature when it's clicked on in the datagrid using the SelectionChanged event; (I'm using selectionchanged rather than the mousedown event because I'm doing this as an add-in to the Silverlight Viewer, and mousedown doesn't work; I've posted this to the Viewer forum as well, but sometimes in the past I've had more response in this forum.)  I have it working with the results from a FindTask, using the findresult, but I can't quite figure out how to make it work with QueryTask and FeatureSet. Can anyone help? I've included the code below for the FindTask code, but I haven't been able to correctly alter it to work for the Query results. private void FindResults_SelectionChanged(object sender, SelectionChangedEventArgs e) { // Highlight the graphic feature associated with the selected row DataGrid dataGrid = sender as DataGrid; int selectedIndex = dataGrid.SelectedIndex; if (selectedIndex > -1) { FindResult findResult = (FindResult)resultsDataGrid.SelectedItem; Graphic graphic = findResult.Feature; ESRI.ArcGIS.Client.Geometry.Envelope selectedFeatureExtent = findResult.Feature.Geometry.Extent; ESRI.ArcGIS.Client.Geometry.Envelope displayExtent = new ESRI.ArcGIS.Client.Geometry.Envelope( selectedFeatureExtent.XMin - 500, selectedFeatureExtent.YMin - 500, selectedFeatureExtent.XMax + 500, selectedFeatureExtent.YMax + 500); MapApplication.Current.Map.ZoomTo(displayExtent); string StrGeometry = findResult.Feature.Geometry.GetType().ToString(); if (StrGeometry.Equals("ESRI.ArcGIS.Client.Geometry.MapPoint")) { graphic.Symbol = Circle; } if (StrGeometry.Equals("ESRI.ArcGIS.Client.Geometry.Polygon")) { graphic.Symbol = Fill; } if (StrGeometry.Equals("ESRI.ArcGIS.Client.Geometry.Polyline")) { graphic.Symbol = YellowLine; } GraphicsLayer graphicsLayer = MapApplication.Current.Map.Layers["MyGraphicsLayer"] as GraphicsLayer; graphicsLayer.ClearGraphics(); graphicsLayer.Graphics.Add(graphic); } } Below is a sample screenshot from our applications.  You perform a find. . in this case for a neighborhood and the results show up in a data grid.  You then double click on the found result in the data grid and it will zoom and place a graphic.  Are you trying to do something similar? ... View more

As suggested by Kenbuga you can set the level instead of zoomfactor in centerAndZoom function. Another way is that you can create a custom extent for the point feature var factor = 100; var extent; if (geom.type == "point") {                     extent = new esri.geometry.Extent({ "xmin": geom.x - factor, "ymin": geom.y - factor, "xmax": geom.x + factor, "ymax": geom.y + factor, "spatialReference": { "wkid": 102100} });                 } This worked really well!!! Thanks for the suggestion.  Initially I set the extent to the initial extent, but it was too taxing on the application.  Your suggestion worked like a charm.  Here is the updated code:     //Zoom to Cemetery Space when User clicks a row     function onRowClickHandler1(evt){   var FindDeceasedName = grid1.getItem(evt.rowIndex).OBJECTID;         var SelectedFindDeceasedName;           dojo.forEach(map.graphics.graphics,function(graphic){           if((graphic.attributes) && graphic.attributes.OBJECTID === FindDeceasedName){             SelectedFindDeceasedName = graphic;             return;           }         });         var FindDeceasedNameExtent = SelectedFindDeceasedName.geometry;   var factor = 100;   var extent;           extent = new esri.geometry.Extent({ "xmin": FindDeceasedNameExtent.x - factor, "ymin": FindDeceasedNameExtent.y - factor, "xmax": FindDeceasedNameExtent.x + factor, "ymax": FindDeceasedNameExtent.y + factor, "spatialReference": { "wkid": 2267} });   map.setExtent(extent);       }  ... View more

When you post code, could you please put them in the wrapper (the # in the formatting tools)? It make the code much easier to read. The centerAndZoom method take either a zoom factor or level. I think that since you're providing it with a factor of 0.001, it's going to zoom in farther each time you click on a row. Try setting it to a zoom level instead (which appears do be what you're doing when you're zooming to the initial map extent). Or you could test if the map is at a certain scale (getScale) or level (getLevel) and use centerAt instead of centerAndZoom. Sorry about the code block post.  Here is where I am looking.  I cannot quite get what I am trying to achieve. . do you have any ideas how I can modify the block below?         //Zoom back to the initial map extent         map.centerAndZoom(center, zoom);       }        //Zoom to tree when user clicks a row     function onRowClickHandler(evt){     var TreePoint = grid.getItem(evt.rowIndex).AssetID;         var SelectedTreePoint;           dojo.forEach(map.graphics.graphics,function(graphic){           if((graphic.attributes) && graphic.attributes.AssetID === TreePoint){             SelectedTreePoint = graphic;             return;           }         });         var TreePointExtent = SelectedTreePoint.geometry;   map.centerAndZoom(TreePointExtent, .001); ... View more

Looks like it was a proxy issue. . was able to set up a proxy page and get the print button to appear.  Now the next step is to modify the code to accomodate the print service. ... View more

I think I got it working.  For those who are interested, have a look at this sample: <!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>Legend and Map</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;             overflow: hidden;         }         #map         {             padding: 0;         }         #header         {             font-size: 14pt;             padding-left: 20px;             padding-top: 4px;             color: #660000;         }     #leftPane {     width: 25%;   }                 .dj_ie .infowindow .window .top .right .user .content         {             position: relative;         }         .dj_ie .simpleInfoWindow .content         {             position: relative;         }     </style>     <script type="text/javascript">         var djConfig = {             parseOnLoad: true,             packages: [{                 "name": "agsjs",                 //"location": location.pathname.replace('/\/[^/]+$/', "") + '/../js/agsjs'     "location": 'http://arcgis02/gmaps-utility-gis/agsjs' // for xdomain load             }]         };     </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("dijit.layout.AccordionContainer");         dojo.require("esri.dijit.editing.Editor-all");         dojo.require("esri.SnappingManager");         dojo.require("agsjs.dijit.TOC");         var map;         function init() {             //snapping is enabled for this sample - change the tooltip to reflect this             esri.bundle.toolbars.draw.start = esri.bundle.toolbars.draw.start + "<br/>Press <b>ALT</b> to enable snapping";             //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: "satellite",                 center: [-96.541, 38.351],                 zoom: 14,                 slider: false             });             dojo.connect(map, "onLayersAddResult", initEditor);             // Add Map Service and Feature Layers    var hydrographywatershed = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer");    //map.addLayer(basemap);       var labels = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");             map.addLayer(labels);             var rivers = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1", {                 mode: esri.layers.FeatureLayer.MODE_ONDEMAND,                 outFields: ['*']             });             var waterbodies = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0", {                 mode: esri.layers.FeatureLayer.MODE_ONDEMAND,                 outFields: ['*']             });             map.addLayers([waterbodies, rivers]);             dojo.connect(map, 'onLayersAddResult', function (results) {                 var toc = new agsjs.dijit.TOC({                     map: map,                     layerInfos: [{          layer: hydrographywatershed,                         title: "hydrographywatershed",                         collapsed: false      }, {                         layer: labels,                         title: "labels",                         collapsed: true                     }, {                         layer: rivers,                         title: "rivers",                         collapsed: true                     }, {                         layer: waterbodies,                         title: "waterbodies",                         collapsed: true                     }]                 }, 'tocDiv');                 toc.startup();             });         }         function initEditor(results) {             var templateLayers = dojo.map(results, function (result) {                 return result.layer;             });             var templatePicker = new esri.dijit.editing.TemplatePicker({                 featureLayers: templateLayers,                 grouping: true,                 rows: 'auto',                 columns: 3             }, 'templateDiv');             templatePicker.startup();             var layers = dojo.map(results, function (result) {                 return { featureLayer: result.layer };             });             var settings = {                 map: map,                 templatePicker: templatePicker,                 layerInfos: layers,                 toolbarVisible: true,                 createOptions: {                     polylineDrawTools: [esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYLINE],                     polygonDrawTools: [esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYGON,               esri.dijit.editing.Editor.CREATE_TOOL_CIRCLE,               esri.dijit.editing.Editor.CREATE_TOOL_TRIANGLE,               esri.dijit.editing.Editor.CREATE_TOOL_RECTANGLE               ]                 },                 toolbarOptions: {                     reshapeVisible: true                 }             };             var params = { settings: settings };             var myEditor = new esri.dijit.editing.Editor(params, 'editorDiv');             //define snapping options             var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CROSS, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.5]), 5), null);             map.enableSnapping({                 snapPointSymbol: symbol,                 tolerance: 20,                 snapKey: dojo.keys.ALT             });             myEditor.startup();         }         dojo.ready(init);     </script> </head> <body class="claro">     <div id="main" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="height: width:100%; height: 100%;"> <!-- Application Header -->     <div data-dojo-type="dijit.layout.ContentPane" id="header" data-dojo-props="region:'top'">     TOC Legend and Editing Template Picker and Toolbar     </div> <!-- Table of Contents --> <div id="leftPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'">   <div data-dojo-type="dijit/layout/AccordionContainer">    <div data-dojo-type="dijit/layout/ContentPane" title="Legend">     <div id="tocDiv"></div>    </div>       <div data-dojo-type="dijit/layout/ContentPane" title="Editor Pane" selected="true">      TemplateDiv      <div id="templateDiv"></div>      EditorDiv      <div id="editorDiv"></div>    </div>       <div data-dojo-type="dijit/layout/ContentPane" title="Geocoding">    </div>   </div> </div>       <!-- Map --> <div data-dojo-type="dijit.layout.ContentPane" id="map" data-dojo-props="region:'center'"></div>      </div> </body> </html> ... View more

I cannot seem to get the template picker to work using an accordion pane.  Here is a sample I have put together.  My goal is to put the TOC in one pane and the template picker and editor in another pane.  Anyone have any ideas?  Below is a copy of the 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>Legend and Map</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;             overflow: hidden;         }         #map         {             padding: 0;         }         #header         {             font-size: 14pt;             padding-left: 20px;             padding-top: 4px;             color: #660000;         }     #leftPane {     width: 25%;   }                 .dj_ie .infowindow .window .top .right .user .content         {             position: relative;         }         .dj_ie .simpleInfoWindow .content         {             position: relative;         }     </style>     <script type="text/javascript">         var djConfig = {             parseOnLoad: true,             packages: [{                 "name": "agsjs",                 //"location": location.pathname.replace('/\/[^/]+$/', "") + '/../js/agsjs'     "location": 'http://arcgis02/gmaps-utility-gis/agsjs' // for xdomain load             }]         };     </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("dijit.layout.AccordionContainer");         dojo.require("esri.dijit.editing.Editor-all");         dojo.require("esri.SnappingManager");         dojo.require("agsjs.dijit.TOC");         var map;         function init() {             //snapping is enabled for this sample - change the tooltip to reflect this             esri.bundle.toolbars.draw.start = esri.bundle.toolbars.draw.start + "<br/>Press <b>ALT</b> to enable snapping";             //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: "satellite",                 center: [-96.541, 38.351],                 zoom: 14,                 slider: false             });             dojo.connect(map, "onLayersAddResult", initEditor);             // Add Map Service and Feature Layers    var hydrographywatershed = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer");    //map.addLayer(basemap);       var labels = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");             map.addLayer(labels);             var rivers = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1", {                 mode: esri.layers.FeatureLayer.MODE_ONDEMAND,                 outFields: ['*']             });             var waterbodies = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0", {                 mode: esri.layers.FeatureLayer.MODE_ONDEMAND,                 outFields: ['*']             });             map.addLayers([waterbodies, rivers]);             dojo.connect(map, 'onLayersAddResult', function (results) {                 var toc = new agsjs.dijit.TOC({                     map: map,                     layerInfos: [{          layer: hydrographywatershed,                         title: "hydrographywatershed",                         collapsed: false      }, {                         layer: labels,                         title: "labels",                         collapsed: true                     }, {                         layer: rivers,                         title: "rivers",                         collapsed: true                     }, {                         layer: waterbodies,                         title: "waterbodies",                         collapsed: true                     }]                 }, 'tocDiv');                 toc.startup();             });         }         function initEditor(results) {             var templateLayers = dojo.map(results, function (result) {                 return result.layer;             });             var templatePicker = new esri.dijit.editing.TemplatePicker({                 featureLayers: templateLayers,                 grouping: true,                 rows: 'auto',                 columns: 3             }, 'templateDiv');             templatePicker.startup();             var layers = dojo.map(results, function (result) {                 return { featureLayer: result.layer };             });             var settings = {                 map: map,                 templatePicker: templatePicker,                 layerInfos: layers,                 toolbarVisible: true,                 createOptions: {                     polylineDrawTools: [esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYLINE],                     polygonDrawTools: [esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYGON,               esri.dijit.editing.Editor.CREATE_TOOL_CIRCLE,               esri.dijit.editing.Editor.CREATE_TOOL_TRIANGLE,               esri.dijit.editing.Editor.CREATE_TOOL_RECTANGLE               ]                 },                 toolbarOptions: {                     reshapeVisible: true                 }             };             var params = { settings: settings };             var myEditor = new esri.dijit.editing.Editor(params, 'editorDiv');             //define snapping options             var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CROSS, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.5]), 5), null);             map.enableSnapping({                 snapPointSymbol: symbol,                 tolerance: 20,                 snapKey: dojo.keys.ALT             });             myEditor.startup();         }         dojo.ready(init);     </script> </head> <body class="claro">     <div id="main" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="height: width:100%; height: 100%;"> <!-- Application Header -->     <div data-dojo-type="dijit.layout.ContentPane" id="header" data-dojo-props="region:'top'">     TOC Legend and Editing Template Picker and Toolbar     </div>    <!-- Table of Contents -->    <div id="leftPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'">        <!-- According Container -->     <div data-dojo-type="dijit.layout.AccordionContainer">            <!-- Legend Pane -->       <div data-dojo-type="dijit.layout.ContentPane" id="legendPane" data.dojo.props="title:'Legend', selected:true">        <div id="tocDiv"></div>        </div>         <!-- Editing Content Pane -->      <div data-dojo-type="dijit.layout.ContentPane" id="editingPane" data.dojo.props="title:'Editing Tools'">       Template Picker       <div id="templateDiv"></div>       Editing Toolbar       <div id="editorDiv"></div>      </div>     </div>    </div>    <!-- Map --> <div data-dojo-type="dijit.layout.ContentPane" id="map" data-dojo-props="region:'center'"></div>      </div>   </body> </html> ... View more

Hi Ian, I modified code for you. But there is a problem. Feature Layer couldn't show properly at the toc. <!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>Edit rivers and waterbodies</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;             overflow: hidden;         }         #map         {             padding: 0;         }         #header         {             font-size: 14pt;             padding-left: 20px;             padding-top: 4px;             color: #660000;         }                 .dj_ie .infowindow .window .top .right .user .content         {             position: relative;         }         .dj_ie .simpleInfoWindow .content         {             position: relative;         }     </style>     <script type="text/javascript">         var djConfig = {             parseOnLoad: true,             packages: [{                 "name": "agsjs",                 "location": location.pathname.replace('/\/[^/]+$/', "") + '/../js/agsjs'             }]         };     </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.Editor-all");         dojo.require("esri.SnappingManager");         dojo.require("agsjs.dijit.TOC");         var map;         function init() {             //snapping is enabled for this sample - change the tooltip to reflect this             esri.bundle.toolbars.draw.start = esri.bundle.toolbars.draw.start + "<br/>Press <b>ALT</b> to enable snapping";             //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: "satellite",                 center: [-96.541, 38.351],                 zoom: 14,                 slider: false             });             dojo.connect(map, "onLayersAddResult", initEditor);             //add boundaries and place names             var labels = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");             map.addLayer(labels);             var rivers = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1", {                 mode: esri.layers.FeatureLayer.MODE_ONDEMAND,                 outFields: ['*']             });             var waterbodies = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0", {                 mode: esri.layers.FeatureLayer.MODE_ONDEMAND,                 outFields: ['*']             });             map.addLayers([waterbodies, rivers]);             dojo.connect(map, 'onLayersAddResult', function (results) {                 var toc = new agsjs.dijit.TOC({                     map: map,                     layerInfos: [{                         layer: labels,                         title: "labels",                         slider: true,                         collapsed: true                     }, {                         layer: rivers,                         title: "rivers",                         slider: true,                         collapsed: true                     }, {                         layer: waterbodies,                         title: "waterbodies",                         slider: true,                         collapsed: true                     }]                 }, 'tocDiv');                 toc.startup();             });         }         function initEditor(results) {             var templateLayers = dojo.map(results, function (result) {                 return result.layer;             });             var templatePicker = new esri.dijit.editing.TemplatePicker({                 featureLayers: templateLayers,                 grouping: true,                 rows: 'auto',                 columns: 3             }, 'templateDiv');             templatePicker.startup();             var layers = dojo.map(results, function (result) {                 return { featureLayer: result.layer };             });             var settings = {                 map: map,                 templatePicker: templatePicker,                 layerInfos: layers,                 toolbarVisible: true,                 createOptions: {                     polylineDrawTools: [esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYLINE],                     polygonDrawTools: [esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYGON,               esri.dijit.editing.Editor.CREATE_TOOL_CIRCLE,               esri.dijit.editing.Editor.CREATE_TOOL_TRIANGLE,               esri.dijit.editing.Editor.CREATE_TOOL_RECTANGLE               ]                 },                 toolbarOptions: {                     reshapeVisible: true                 }             };             var params = { settings: settings };             var myEditor = new esri.dijit.editing.Editor(params, 'editorDiv');             //define snapping options             var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CROSS, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.5]), 5), null);             map.enableSnapping({                 snapPointSymbol: symbol,                 tolerance: 20,                 snapKey: dojo.keys.ALT             });             myEditor.startup();         }         dojo.ready(init);     </script> </head> <body class="claro">     <div id="main" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"         style="height: width:100%; height: 100%;">         <div data-dojo-type="dijit.layout.ContentPane" id="header" data-dojo-props="region:'top'">             Edit Hydrography         </div>         <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" style="width: 300px;             overflow: hidden;">             <div id="templateDiv">             </div>             <div id="editorDiv">             </div>         </div>         <div data-dojo-type="dijit.layout.ContentPane" id="map" data-dojo-props="region:'center'">         </div>         <div dojotype="dijit.layout.ContentPane" id="leftPane" region="right" style="visibility: visible;             width: 300px;">             <div dojotype="dijit.layout.ContentPane" id="legendPane" title="Lejant" selected="true">                 <div data-dojo-type="dijit.layout.AccordionContainer">                     <div data-dojo-type="dijit.layout.ContentPane" title="Tabakalar" selected="true">                         <div id="tocDiv">                         </div>                     </div>                 </div>             </div>         </div>     </div> </body> </html> Thanks for the reply.  I copied this sample to my machine and tried to run, but this is what I get in my browser: ... View more