Community

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

575
5
07-18-2013 05:00 PM
IanPeebles
by
Occasional Contributor III
‎07-18-2013 05:00 PM
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.
0 Kudos
5 Replies
MustafaOgurlu
by
New Contributor II
‎07-19-2013 12:48 AM
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>
0 Kudos
IanPeebles
by
Occasional Contributor III
‎07-19-2013 06:09 AM
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:
Preview file
47 KB
0 Kudos
IanPeebles
by
Occasional Contributor III
‎07-19-2013 12:07 PM
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...", {
                mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                outFields: ['*']
            });

            var waterbodies = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer...", {
                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>
0 Kudos
IanPeebles
by
Occasional Contributor III
‎07-19-2013 12:44 PM
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...", {
                mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                outFields: ['*']
            });

            var waterbodies = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer...", {
                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>
0 Kudos
melissaGomez
by
New Contributor III
‎07-30-2013 09:07 AM
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:

<!--Start All Div Tags in Left Pane for Accordion Container-->
      <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

<!--add legend here-->
         <div data-dojo-type="dijit.layout.ContentPane" id="legendPane"
           data-dojo-props="title:'Legend', selected:true">
        <!--<div id="legendDiv"></div>-->
  <div id="tocDiv">
      </div>
      </div>
<!--end adding legend here-->
 
        
<!--start adding print button here-->
       <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Print'">
           <div id="printButton">
    </div>
    </div>
<!--end print button here-->
   
<!--start bookmark here-->
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Bookmark'">
          <div id="bookmark"></div>
        </div>
      </div>
      </div>
    </div>
<!--end bookmark here-->
<!--End all Div Tags in Left Pane for Accordion Container-->

Please help, thanks..
0 Kudos