topic Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible in ArcGIS JavaScript Maps SDK Questions

agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

NianweiLiu — Fri, 26 Jul 2013 17:51:05 GMT

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

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

KenBuja — Fri, 26 Jul 2013 18:13:09 GMT

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

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

KevinMacLeod1 — Thu, 01 Aug 2013 11:07:18 GMT

Thank you Nianwei you rock! This is awesome!

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

BarryGuidry — Sun, 12 Dec 2021 03:30:39 GMT

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'

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

NianweiLiu — Thu, 01 Aug 2013 14:29:49 GMT

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.

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

AdrianMarsden — Sun, 12 Dec 2021 03:30:41 GMT

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

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

NianweiLiu — Sun, 12 Dec 2021 03:30:44 GMT

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.

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

AdrianMarsden — Mon, 05 Aug 2013 12:46:05 GMT

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.

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

AdrianMarsden — Sun, 12 Dec 2021 03:30:47 GMT

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

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

BarryGuidry — Sun, 12 Dec 2021 03:30:50 GMT

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.

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

melissaGomez — Wed, 07 Aug 2013 15:17:21 GMT

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

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

jerrysalinas — Thu, 08 Aug 2013 18:31:55 GMT

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.

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

NianweiLiu — Thu, 08 Aug 2013 18:49:32 GMT

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.

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

BarryGuidry — Sun, 12 Dec 2021 03:30:52 GMT

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.

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

KenBuja — Sun, 12 Dec 2021 03:30:55 GMT

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.

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

jerrysalinas — Fri, 09 Aug 2013 13:25:57 GMT

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.

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

NianweiLiu — Sun, 12 Dec 2021 03:30:58 GMT

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

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

AdrianMarsden — Mon, 12 Aug 2013 10:45:52 GMT

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

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

NianweiLiu — Sun, 12 Dec 2021 03:31:00 GMT

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.

Re: agsjs.dijit.TOC now supports FeatureLayer and AMD compatible

AdrianMarsden — Tue, 13 Aug 2013 10:19:44 GMT

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