nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

タグ付けされた投稿をもっと見る

Accepted answers

All comments

GaneshSolai_Sambandam

Thank you, Matt, I may use this to set up my accordion panes when I get to that point.

Currently, I think my main issue is figuring out how to call individual layers within my map, which was set up through ArcGIS online. The first three layers in my map are all tiled services, and seem to have easy to understand ID numbers: 1, 2, and 3. I also can get the basemap added to my legend by using the ID 0 (zero). After that, everything I try is coming up as undefined. Any idea why this may be? Are feature services ID numbers set up differently than other services?

Please let me know if this should be posted in another forum, or anything.

Thanks again,
-Arty

HI,
Can anyone tell me, how to get the ArcGISDynamic MapService layer name from map.getLayer(map.LayerIds(1)) method.

ArthurRodriguez

Thank you, Matt, I may use this to set up my accordion panes when I get to that point.

Currently, I think my main issue is figuring out how to call individual layers within my map, which was set up through ArcGIS online. The first three layers in my map are all tiled services, and seem to have easy to understand ID numbers: 1, 2, and 3. I also can get the basemap added to my legend by using the ID 0 (zero). After that, everything I try is coming up as undefined. Any idea why this may be? Are feature services ID numbers set up differently than other services?

Please let me know if this should be posted in another forum, or anything.

Thanks again,
-Arty

MattDriscoll

I have an accordion legend here if you'd like to use it:

http://driskull.github.io/arcgis-dijit-layer-legend-js/
https://github.com/driskull/arcgis-dijit-layer-legend-js

ArthurRodriguez

Hello,

I am fairly new to Javascript programing, and trying to incorporate @kmacleod's suggestion to use multiple instances of the TOC/Legend widget, in an accordion style presentation within my legend. In my attempts to work through this, I am first trying to simply add each layer into the TOC widget (within the legend pane), while also incorporate the transparency slider. Note that I am working from the ArcGIS Basic Viewer web application, which may be part of my issue.

My code (below) works great for the first three layers, which are all tile services. However, starting at layer 4, all remaining layers are Feature Services, and I keep getting errors that these layers are not being found, or not loaded. If I call all layers (simply using layerInfos: layerInfo), then everything does get added to the legend (but no slider bars, of course, and then I can't split up what layers go into what accordion pane). Any suggestions for what I may be doing wrong would be greatly appreciated!!!

-Arty

var legendDijit = new agsjs.dijit.TOC({//NL: new esri.dijit.Legend({
        map: map,  
        layerInfos: [{
    layer: map.getLayer(map.layerIds[1]),
    slider: true
  }, {
    layer: map.getLayer(map.layerIds[2]),
    slider: true
  }, {
    layer: map.getLayer(map.layerIds[3]),
    slider: true
  }, {
    layer: map.getLayer(map.layerIds[4]),
    slider: true  
  }]
    }, dojo.create('div'));

    dojo.byId('legendPanel').appendChild(legendDijit.domNode);

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.

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

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

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

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

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

ManojrajTeli

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

see this example

AlexZhuk

Not available anymore? 😞

NianweiLiu

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

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.