agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

NianweiLiu · ‎07-26-2013

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

melissaGomez · ‎08-07-2013

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

jerrysalinas · ‎08-08-2013

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.

NianweiLiu · ‎08-08-2013

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.

BarryGuidry · ‎08-08-2013

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.

KenBuja · ‎08-09-2013

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.

jerrysalinas · ‎08-09-2013

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.

NianweiLiu · ‎08-09-2013

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

AdrianMarsden · ‎08-12-2013

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

To

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

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

Cheers

ACM

NianweiLiu · ‎08-12-2013

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 · ‎08-13-2013

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