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>