topic Re: Getting the Table of Contents (TOC) to work with the Template Picker/Editor in ArcGIS JavaScript Maps SDK Questions

Getting the Table of Contents (TOC) to work with the Template Picker/Editor

IanPeebles — Fri, 19 Jul 2013 00:00:34 GMT

Has anyone been able to add in a template picker/editor to a pane based on the sample below?

http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/examples/toc.html

I have been able to get a similar TOC sample to work (shown above), but cannot get a template picker/editor toolbar to work properly within the frames.

Here is the template picker and editor I am trying to add into a pane from the first sample:

http://developers.arcgis.com/en/javascript/samples/ed_simpletoolbar/

Essentially, I am trying to get both of these samples to work together, but have been unsuccessful. I will see if I can put together a sample and attach the code.

Re: Getting the Table of Contents (TOC) to work with the Template Picker/Editor

MustafaOgurlu — Sat, 11 Dec 2021 16:22:32 GMT

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>

Re: Getting the Table of Contents (TOC) to work with the Template Picker/Editor

IanPeebles — Sat, 11 Dec 2021 16:22:35 GMT

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:

Re: Getting the Table of Contents (TOC) to work with the Template Picker/Editor

IanPeebles — Fri, 19 Jul 2013 19:07:43 GMT

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">
    
    <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%;">


    <div data-dojo-type="dijit.layout.ContentPane" id="header" data-dojo-props="region:'top'">
    TOC Legend and Editing Template Picker and Toolbar
    </div>

   
   <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" id="legendPane" data.dojo.props="title:'Legend', selected:true">
       <div id="tocDiv"></div>
      </div>

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


<div data-dojo-type="dijit.layout.ContentPane" id="map" data-dojo-props="region:'center'"></div>
    </div>

</body>
</html>

Re: Getting the Table of Contents (TOC) to work with the Template Picker/Editor

IanPeebles — Fri, 19 Jul 2013 19:44:41 GMT

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">
    
    <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%;">


    <div data-dojo-type="dijit.layout.ContentPane" id="header" data-dojo-props="region:'top'">
    TOC Legend and Editing Template Picker and Toolbar
    </div>


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





<div data-dojo-type="dijit.layout.ContentPane" id="map" data-dojo-props="region:'center'"></div>
    </div>

</body>
</html>

Re: Getting the Table of Contents (TOC) to work with the Template Picker/Editor

melissaGomez — Tue, 30 Jul 2013 16:07:12 GMT

Hello,

I was using your previous example to build my TOC/Legend Widget and I got it up and running, but now I am having trouble getting my Accordion Container to appear. Everything is showing all at once in my legend.
How did you get your accordion container to continue working with the TOC?

Here is my code:


      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" id="leftPane">
      <div data-dojo-type="dijit.layout.AccordionContainer">

        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend'">
          Political Boundaries


         <div data-dojo-type="dijit.layout.ContentPane" id="legendPane"
           data-dojo-props="title:'Legend', selected:true">
        
<div id="tocDiv">
      </div>
      </div>




       <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Print'">
           <div id="printButton">
    </div>
    </div>



        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Bookmark'">
          <div id="bookmark"></div>
        </div>
      </div>
      </div>
    </div>



Please help, thanks..