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

agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

NianweiLiu

Hello,
For those folks that use the widget agsjs.dijit.TOC, please be aware that a few enhancements have been put in, specifically:

--FeatureLayer. Supports Simple, UniqueValue and Range Renderer.
--AMD compatible. support both AMD and classic syntax (with sample code).
--fixed some problem when refresh after layer list change.

Some of the fairly complex but less known functionality was dropped to simplify the code upgrade, such as creation of check box on legend items based on UniqueValueRenderer, etc.

For live sample and download, please go to
http://www.arcgis.com/home/item.html?id=9b6280a6bfb0430f8d1ebc969276b109

Nianwei Liu
Charlotte, NC

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

DENGD

I need help to automatically uncheck the checkbox next to Root layer Topographic Contours on agsjs.dijit.toc. Topographic Contours is a cached tile map service that is not like dynamic map service -- easily make layers visible or invisible. Thanks.

Anonymous User

I hope so, too. The ESRI layer list lacks integrated legend, transparency, powerful config. A "-" for groups with some but not all sublayers on would also be good to implement.

mcrook_cof

This may be low priority but I'll ask it anyways. This TOC worked perfectly in ESRI JavaScript 3.xyz. I'm now working in ESRI JavaScript 4.0+ beta. It's possible maybe it needs to be implemented a different way but it doesn't seem to work properly in the latest JS API version. Thanks for your hard work on this.

Will you build a new version that will play will with ERSI's JavaScript 4.0 API?

GokuSan

Great job. I'm working the last version (update 2015-01-15) but I'm having problems when the layer is a ArcGISDynamicMapServiceLayer and applies a layerDrawingOptions. The problem is that the legend is drawn in the toc does not match the loaded in the map layer; in this case , the legend of toc equals legend MapService. Does anybody have the same problem?

NianweiLiu

So if I have a Paved Areas layer, with Road, Parking, and Driveway attributes, I would see three checkboxes under the 'Paved Areas' layer and I could turn off just parking, with an older AGS JS TOC?

That was the most powerful and complex feature in the widget. It look thorough the uniquevaluerenderer, breaks up values, create check boxes for each, and based on what user checked, generate a definition query (mainly with "OR" in where clause) and pass to server to display a subset. Unfortunately, there was a bug(NIM074988) in REST API that can not handle passed in definitions correctly if the predefined expression contains an "OR" in where clause without full parenthesis around it. That was the case for the sample map service. It was not fixed for a long time. Esri eventually declined the bug because not producible in latest version, but they also no longer return the predefined query expression in the layer meta data, that also have impact on the code. On top of that, if the application code actually set query definition manually, it became quite difficult to sync what the TOC trying to do and what the application trying to do. With all these issues, that function was dropped. If you do want that, you can use v2.04 before you upgrade your server to a version that no longer returns predefined expression such as 10.2.

you had to add a query statement for some reason in the layer, but 1=1 (ie everything) did the trick.

A pre-defined definitionExpression (even 1=1) is used in the code as a trigger to generating checkboxs for UniqueValueRenderer's individual value. It was stated in the "build legend node" section of the source code.

AdrianMarsden

Yep - you had to add a query statement for some reason in the layer, but 1=1 (ie everything) did the trick.

I think build 2.4 did it.

On the other hand if you had grouped lots of attribute, (say cad feature = Building, Garage, Shed) as one style, the TOC would break them out again.

KevinMacLeod1

I just noticed this, shame, I was selling that as a neat new feature to my users - any chance of adding this back in as an option? I agree it wasn't for everyone, as if you had a poorly index/large layer it did have a server hit.

Cheers

ACM

amarsden which version was this? This would save me an incredible amount of time and I will downgrade one of my sites to get this, if it works the way I think it does based on your post. Can I ask what you mean by this? So, let's say I have a few dozen layers. They came from CAD and only have on attribute, 'Layer'. Things like Road, Driveway, Parking, etc for one layer, for example. Are you saying that, at least previous versions of AGS JS TOC, would allow us to turn of PART of a layer, based on attribute? So if I have a Paved Areas layer, with Road, Parking, and Driveway attributes, I would see three checkboxes under the 'Paved Areas' layer and I could turn off just parking, with an older AGS JS TOC? That would be great for us on one viewer.

AdrianMarsden

Nianwei Liu - this may be a caching/IIS/IE thing but my users are mentioning that sometime the expand button (the little cross) vanishes from collapsed TOCs - I've yet to be able to repeat this, but when it does happen a clear of the IE cache seems to work.

Has anyone else had these issues?

Cheers

ACM

AdrianMarsden

Some of the fairly complex but less known functionality was dropped to simplify the code upgrade, such as creation of check box on legend items based on UniqueValueRenderer,

I just noticed this, shame, I was selling that as a neat new feature to my users - any chance of adding this back in as an option? I agree it wasn't for everyone, as if you had a poorly index/large layer it did have a server hit.

Cheers

ACM

AdrianMarsden

Thanks for that - our users are used to this behaviour - turning on greyed out layers, even through nothing will appear until the zoom is changed, as that is what I gave them 7 years back in my ArcIMS site, using David Bollinger's TOC. So, they seem to be able to cope.

I'll take a look at your suggestion next time I'm doing work on my site - many thanks.

ACM

NianweiLiu

Basically I want my users to be able to switch greyed out layers on, even when they are greyed out

This could lead to some confusing behavior, cause the user may expect the layer to be visible after click. You may consider force the map zoom when user clicked something that is out of scale.

If you really want to enabled the disabled checkbox for out of scale layers, you can have a function like.

function enableAllCheckBox(){
     dojo.query('.agsjsTOCOutOfScale').forEach(function(node, idx){
          var tocNode = dijit.getEnclosingWidget(node);
           if (tocNode.checkNode) {
                if (tocNode.checkNode.set) {
                   // for dijit.form.CheckBox
                  tocNode.checkNode.set('disabled', false);
                } else {
                   // for regular HTML checkbox input
                  tocNode.checkNode.disabled = false;
                }
             }
         });
   }

Then call this function in the 'onLoad' of TOC, then attach to 'onZoomEnd' event of map. Use a timer if necessary.

AdrianMarsden

Hi

I've found I had made one other hack to the old code. Basically I want my users to be able to switch greyed out layers on, even when they are greyed out, so they will draw when the users zooms in enough to see them. On the latest version I change this line

 if (this.checkNode) if (this.checkNode.set) this.checkNode.set("disabled", a);

 if (this.checkNode) if (this.checkNode.set) ;

Is there a better way of doing this without having to hack the code?

Cheers

ACM

NianweiLiu

when I copied the GoogleMapsLayer, I misspelled it, thus it could not find it.

You are probably not using the latest version. GoogleMapsLayer was used in a fairly old version in which it get special treatment like toggle traffic layers and switch between basemaps within TOC etc. However, all these features were removed to keep the TOC itself simple.
The download page on arcgis.com links to http://www.arcgis.com/sharing/rest/content/items/6e816dab9ea243608ef02236c113a8b4/data

However your browser cache give you an older version. You may need clean your history or use ctrl+f5 to force it. The unzipped build../TOC.js should have a built date of 2013-08-05 or later at the top, as:

/*built on 2013-08-05 12:16:32.99*/ 
define("agsjs/dijit/TOC",["dojo/_base/declare","dijit/_Widget","dijit/_Templated","dojox/gfx","dojo/fx/Toggler","dijit/form/Slider"],function...

jerrysalinas

Thanks Ken & Everyone.

Looks I was finally able to get it to work..... I tweaked my file structure, but most importantly. I when I copied the GoogleMapsLayer, I misspelled it, thus it could not find it. I can't believe it.

Thanks.

kenbuja

I am not pointing to GoogleMapsLayer.js to display the TOC, but to:
'http://localhost/APPS/agsjs/build/agsjs'
But, this is in order to use the TOC feature with my data.

If you look at the source files in http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/ and dig down into the build directory or the different releases, you'll see that there is a file GoogleMapsLayer.js located in build/agsjs/layers/. Although you may not use it, the TOC will. Therefore, you should ensure that you copy everything in the directory http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/ to your server.

BarryGuidry

hI,
I am attempting to host the 'agsjs' files on our own server, I downloaded the code from
            //http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/
              and put it in folders on our server and then use path like:
            //"location": location.pathname.replace(/\/[^/]+$/, '') + '/../src/agsjs'
When I run the app, I always get the following error....
404 Object Not Found - http://localhost/APPS/agsjs/build/agsjs/layers/GoogleMapsLayer.js

Where is the 'GoogleMapsLayer.js' coming from. I don't want to point to 'http://gmaps...." seems to unstable lately.

Thanks.

I am not pointing to GoogleMapsLayer.js to display the TOC, but to:

'http://localhost/APPS/agsjs/build/agsjs'

But, this is in order to use the TOC feature with my data.

NianweiLiu

hI,
I am attempting to host the 'agsjs' files on our own server, I downloaded the code from
            //http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/
              and put it in folders on our server and then use path like:

These are "custom modules". Please make sure you have successfully setup at least one simple dojo custom module on your own server first. There are a few samples in the ArcGIS documentation to walk you through. Once you get past that stage, make sure you saved all file from the code hosting site. Ideally you should use a SVN client to check out the code. Alternatively you can download a zip file from the page on arcgis.com download link.

If you browser complains can not find a file, chances are you did not save it to correct location, download it and follow Esri or dojo documentation.

jerrysalinas

I ended up having IT place the 'agsjs' files on the server, and put the full path to the directory on the server in the web application, which now works. First, I basically tried the same on my Sharepoint site, which did not work.

hI,
I am attempting to host the 'agsjs' files on our own server, I downloaded the code from
            //http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/
              and put it in folders on our server and then use path like:
            //"location": location.pathname.replace(/\/[^/]+$/, '') + '/../src/agsjs'
When I run the app, I always get the following error....
404 Object Not Found - http://localhost/APPS/agsjs/build/agsjs/layers/GoogleMapsLayer.js

Where is the 'GoogleMapsLayer.js' coming from. I don't want to point to 'http://gmaps...." seems to unstable lately.

Thanks.

melissaGomez

Is anyone else having trouble viewing the following link provided from the original post:

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

I am constantly getting error messages using the TOC.js since Monday (off and on throughout the day) and I am thinking it has to do with the new enhancements?
I am using the following code:

<script type="text/javascript">
        var djConfig = {
            parseOnLoad: true,
            packages: [{
                "name": "agsjs"
             //   "location": location.pathname.replace(/\/[^/]+$/, "") + '/agsjs'
                "location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/xbuild/agsjs' // for xdomain load
            }]
        };
    </script>

//later in my code, I am also using the following:

//add the legend
      dojo.connect(map, 'onLayersAddResult', function (results) {

         var toc = new agsjs.dijit.TOC({
            map: map,
            layerInfos: [{
              layer: dynaLayer1,
              title: "Political Boundaries",
              noLegend:false,
              noLayers: false

            }

                        ]
          }
                                        , 'tocDiv');
          toc.startup();
                console.log("Set TOC");


         }
                    );




map.addLayers([dynaLayer1]);

dojo.connect(map, 'onLoad', function (theMap) {
        //resize the map when the browser resizes
        dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
      });

//"end legend"

Can anyone guide me the right direction or if you are getting these error messages throughout the day as well? Please let me know, thanks.

-Melissa

BarryGuidry

Could anybody ever get this portion of the agsjs connection code to work? I could only get a full direct path to the 'agsjs' directory to work.
name: "agsjs", //necessary for TOC
                location:location.pathname.replace(/\/[^/]+$/, "")+'/./build/agsjs'

I ended up having IT place the 'agsjs' files on the server, and put the full path to the directory on the server in the web application, which now works. First, I basically tried the same on my Sharepoint site, which did not work.

AdrianMarsden

Hi

I'm not sure if this is a small glitch, but I used to have

{
                layer: aerials,
                slider: true,
                title: "Aerials",
                collapsed: true
            }

To define a TOC on my aerial service, which is pure rasters, with nothing switched on by default. Using the latest version this gets classed as a un-openable menu item

<img src="http://my server/arcgis_js_api/library/3.5/jsapi/js/dojo/dojo/resources/blank.gif" alt="" data-dojo-attach-point="iconNode" class="dijitTreeExpando dijitTreeExpandoClosed" style="visibility: hidden;">

A very small tweak to my code

{
                layer: aerials,
                slider: true,
                title: "Aerials",
                isopen: true,
                collapsed: true
            }

and all is fine

Cheers

ACM

AdrianMarsden

Brilliant! Missed that, I'll take a look at it now and revert to the original code.

Nice update - grouped styles work as they do in ArcMap now, rather than being split by the unique values.

NianweiLiu

adding a class to the image
ACM

I added class 'agsjsTOCIcon' class. It's in code not in template string because feature layer's symbol is replaced by a SVG/VML container, not a IMG.

If you just need to set your icon image style, you do not really need this new class, simply use

.agsjsTOCNode img {
 /* your style */    
}

in your style sheet would be sufficient.

But I added the class to cover client side none IMG symbol.

AdrianMarsden

Liu - many thanks for the update. The only non-style based change I make is to this line

        templateString: '<div class="agsjsTOCNode"><div data-dojo-attach-point="rowNode" data-dojo-attach-event="onclick:_onClick"><span data-dojo-attach-point="contentNode" class="agsjsTOCContent"><span data-dojo-attach-point="checkContainerNode"></span><img class="tocimage" src="${_blankGif}" alt="" data-dojo-attach-point="iconNode" /><span data-dojo-attach-point="labelNode"></span></span></div><div data-dojo-attach-point="containerNode" style="display: none;"> </div></div>',

adding a class to the image - any chance of adding that to your version? It justs gives me a bit more control over style - I add a vertical-algn:bottom to mine.

Many thanks

ACM

NianweiLiu

Could anybody ever get this portion of the agsjs connection code to work? I could only get a full direct path to the 'agsjs' directory to work

Bottom line is that you need to let the browser resolve to the correct path, and that depends on your folder structure. You can see where the 404 error says in firebug, or simply log the path out to see if matches your actual folders.

BarryGuidry

Could anybody ever get this portion of the agsjs connection code to work? I could only get a full direct path to the 'agsjs' directory to work.

name: "agsjs", //necessary for TOC
                location:location.pathname.replace(/\/[^/]+$/, "")+'/./build/agsjs'

KevinMacLeod1

Thank you Nianwei you rock! This is awesome!

kenbuja

Great update, Nianwei! I really like the widget and am quite thankful that you took the time to create it.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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