<!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>
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>
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
