AGS JavaScript Api Combined TOC/Legend Contol

[SimonFisher]

Has anyone seen or been working on a Combined TOC/Legend Contol for the AGS JavaScript Api? something similar to what is available in the Web Adf TOC?  I have seen lots of examples, discussion, etc. on a Legend control or TOC control seperately, but nothing combined where the TOC simply has the symbology within it.

thx
Simon

[NianweiLiu]

try
http://www.arcgis.com/home/item.html?id=9c43bdf76a23452ba1d95684f7cd76d8

[AlexZhuk]

Not available anymore? 😞

[ManojrajTeli]

http://gmaps-utility-gis.googlecode.com/svn-history/r354/trunk/agsjs/examples/toc.html 

see this example

[CourtneyRiggs]

Is it possible to make the above legend/TOC work with a map that is using JSAPI 3.3? I have everything else I need working but it uses the JSAPI 3.3.

Thanks,
Court

[DianaBenedict]

Is it possible to make the above legend/TOC work with a map that is using JSAPI 3.3? I have everything else I need working but it uses the JSAPI 3.3.

Thanks,
Court

I am using the custom legend and it all works with the Javascript 3.3 API. I have not had any issues with it.
Just point all the stylesheet ref and js source files to the correct version.

Note that in my case I exported all the files for the TOC and added to my solution as requested by the client.

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/soria/soria.css"/>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dojox/grid/resources/SoriaGrid.css">  
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dojox/layout/resources/FloatingPane.css"/>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dojox/layout/resources/ResizeHandle.css"/>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" /> 
    <link rel="stylesheet" href="css/defaultStyle.css"/>
  
    <script>
      var dojoConfig = {
        parseOnLoad: true,
        packages: [
          { "name": "agsjs",
            "location": location.pathname.replace(/\/[^/]+$/, "")+'/lib/agsjs/Build_2_04'
          }]
      };     
    </script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3"></script>

[CourtneyRiggs]

Diana, thank you for that info, it has gotten me a bit further!! Unfortunately I am stuck again, but I think I know where.

I have only been writing code for a couple weeks so all this is still very new and confusing to me, so thank you for any help!!

I have made sure all the links you listed are included and changed the script for var dojoConfig. I changed the path in the modulePaths to 2.04 because it looks like yours is referencing 2.4. Once I do that nothing works regardless of the version the API is set to.

If you can point me in the right direction on how to fix this I would greatly appreciate it!!!

Here is a link to the code I have (with the packages and JSAPI3.3: http://mas-gis.info/cariggs/All_ToggleLegend4.html

Thank you,
Court

[DianaBenedict]

Court

1) I forgot to remove the reference to my css file called defaultStyle.css so please make sure to remove that reference
2) I decided to use the esri Soria Stylesheets but there are others that they do have that might also work for you. So in my case, I referenced the soria.css style
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/soria/soria.css"/>
3) Some people have indicated that you should make sure to keep the link to the esri.css stylesheet so that your UI renders correctly
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" />
4) All the other links to external styles are based on other DOJO widgets that use such as data grids, floating panels, etc... So I had to go ahead and add them in. However, you may not need them in your applicaiton.  (Try to keep it light if you can).

5) The source code and reference to the most current version of the agsjs library can be found here:
http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/
You might want to look at the following samples for additional help
http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/examples/toc.html (this sample still references old stuff)
http://maps.charlottenc.gov/templates/basicviewer/?webmap=460c54f38736428fa9c3429071be07b8 (this sample is like mine, it reference the library that is copied locally

Note that in the toc.html example (right click on the page --> view source) indicates that you can use the following for the location property which is the commented out section of the code:
'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.02/xbuild/agsjs' // for xdomain load
...but test this out for sure cause it looks like the code has not been updated, you should be able to see the xbuild code at the following instead
http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/xbuild/agsjs
ALSO,  DO NOT use the djConfig but rather dojoConfig

6) Make sure to include your dojo.require statements to make it all work
7) set up your layerInfo object for each layer that you want to be in the legend. Refer to the documentation:
http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/docs/toc/reference.html#TOCLayerInfo
😎 create the legend

so your code might look something like this ...

//changes to the djC
          var dojoConfig = {
              parseOnLoad: true,
              packages: [{
                "name": "agsjs",
                "location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/xbuild/agsjs' 
              }]
            };

//add the require statements in the section of the JS script/file
dojo.require("dojo.fx");
dojo.require("agsjs.dijit.TOC");

//create code to set up your legenLayerInfos
//..this part is up to you on how you do this
var layerInfos = [];
//TODO: you need to add an array that looks something like this .. note this is only an example of one layerInfo object that the legend expects
var layerInfo = {
   "layer": fcMapLayer.layerObject,
     "title": mapLayer.title,
     "defaultSymbol": false
};
layerInfos.push(layerInfo);

//create the legend object
var legendDijit = new agsjs.dijit.TOC({//NL: new esri.dijit.Legend({
        map: map,
        layerInfos: layerInfo
    }, dojo.create('div'));

I hope this helps

[KevinMacLeod1]

Also just a tip.. you can put multiple instances of the AGSJS TOC object (the widget) in your site. For example, I have several AGSJS TOC widgets, each in their own Accordion Panes.  (Read more on Accordions and Border Container layout on in Dojo's docs at the Dojo website  at http://dojotoolkit.org/reference-guide/1.8/dijit/layout/BorderContainer.html ).

Also, it does the cascading levels only for dynamic layers, NOT feature layers! That is why we put a few AGSJS TOCs with Feature Layers into their own Accordions. However that'd be a cool update.

Note that the coolest example is that the auther Nianwei integrated his widget into the ESRI Basic Viewer at http://maps.charlottenc.gov/templates/basicviewer/?webmap=460c54f38736428fa9c3429071be07b8

(Thread: http://forums.arcgis.com/threads/75725-BasicViewer-with-TOC )

I'd love to see this just rolled into the API by default. It's a fantastic piece of work. Also, see his Google Maps widget, at his site above. I would encourage ESRI to consider integrating this.

Also Court consider reviewing Dojo's docs on using dojoConfig to use ESRI's server for the API but deploying this widget locally. http://dojotoolkit.org/documentation/tutorials/1.8/dojo_config/

Hope this is enough to get you started and it helps. I just learned and implemented this same process last month. 🙂

[HelenZhou]

Hi, the TOC widget works well with map initial loading. But when I add a new map service to the map later, reset the TOC's layerInfos, and do toc.refresh(). The exisiting layers in the table of content gets doubled. Does anybody know why? Thanks.