Select to view content in your preferred language

BasicViewer with TOC

3750
10
01-21-2013 09:20 AM
KevinMacLeod1
Frequent Contributor
The ESRI JS Basic Viewer template has a separate Layer List widget and Legend. This layer list does not group layers hierarchically. Also it seems to make sense to combine the layer list and legend.

The AGS TOC widget by poster nliu here is great, it does these both.  http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/examples/toc.html

Has anyone integrated this with the ESRI Basic Viewer template?

If not.. I will try to do this, and share back.
0 Kudos
10 Replies
NianweiLiu
Frequent Contributor

Has anyone integrated this with the ESRI Basic Viewer template?

Here is a starter:

http://maps.charlottenc.gov/templates/basicviewer/?webmap=460c54f38736428fa9c3429071be07b8

It also has 2 extra things that I feel might be useful:
--Google maps as a basemap option
-- toggle labels for basemaps if available.
0 Kudos
GaganJaswal
New Contributor
Here is a starter:

http://maps.charlottenc.gov/templates/basicviewer/?webmap=460c54f38736428fa9c3429071be07b8

It also has 2 extra things that I feel might be useful:
--Google maps as a basemap option
-- toggle labels for basemaps if available.


Hi nliu,

Would it be possible for you to share the source code for this?

Thanks for your help. This really helps.
0 Kudos
GaganJaswal
New Contributor
Here is a starter:

http://maps.charlottenc.gov/templates/basicviewer/?webmap=460c54f38736428fa9c3429071be07b8

It also has 2 extra things that I feel might be useful:
--Google maps as a basemap option
-- toggle labels for basemaps if available.


Never mind your link resource was good enough. Thanks for sharing.
0 Kudos
KevinMacLeod1
Frequent Contributor
Never mind your link resource was good enough. Thanks for sharing.


Thank you so much nliu.

How do we access the /javascript  folder for that site to see the javascript source code rel linked to in the index.html? Gave me 403 forbidden.

We have already integrated your AGSJSTOC into our site (great work, and thank you). We planned to use feature layers for easier querying and since AGSJS wasn't showing featureLayer symbology, we put AGSJS TOC into an AccordionPane. To group several groups of layers we created several instances of AGSJS, one each in an accordionPane. Works nicely. Then we put a Legend dijit in one AccordionPane, all in an AccordionContainer on the left region. When our site is complete soon I will share this.

However, this site above is very, very helpful for people to know about. It looks like it leverages ArcGIS.com webmaps but with your AGSJS TOC... which is awesome. In fact perhaps it would be good to adopt this exact site as the new default version of the ESRI JavaScript Basic Viewer template!
0 Kudos
NianweiLiu
Frequent Contributor

How do we access the /javascript  folder for that site to see the javascript source code rel linked to in the index.html? Gave me 403 forbidden.

As a general practice we do not allow directory browsing against a directory. You can however follow individual file's URL either via 'view source' or firebug net to get to them.
0 Kudos
KevinMacLeod1
Frequent Contributor
Thanks nliu that worked, I perused all scripts. Very nice work, and thank you.
0 Kudos
DavidAshton
Frequent Contributor
nliu,

I'm trying to get the Legend tool integrated with the basicveiwer template and I'm having trouble.  It is like it is not reading where my TOC.js and TOC.css file live.  I think I have all the piece needed.

In you code you have
[HTML]
{
          "name": "agsjs",
          "location": location.pathname.replace(/\/[^/]+$/, "")+'/lib/agsjs/build/agsjs'
      }]
[/HTML]

Is this the correct syntax.  I noticed that your source is templates/basicviewer//lib/agsjs/build/agsjs/layers.

What is confusing is the // before lib...how is that even possible?

Should the syntax be something like

[HTML]
{
        name: "agsjs",   //no quotes around name
        location: location.pathname.replace(/\/[^/]+$/, '') + '/lib/agsjs/build/agsjs'  //single quotes instead of double and no quotes around location
      }]
[/HTML]

It doesn't seem to want to see the TOC.js and TOC.css file either way.  Do I need the Google maps as a basemap option tools. 

Not sure what to do I've spent several days on this...maybe I could send you my viewer and you could take a look.

thanks
d
0 Kudos
DavidMcGill
Deactivated User
here is a screen shot of my folders
[ATTACH=CONFIG]23295[/ATTACH]
The application HTML file is located in the C:\inetpub\wwwroot\
     The "agsjs" folder, for Table of Contents, was copied into C:\inetpub\wwwroot\


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





dojo.connect(map, 'onLayersAddResult', function (results) {
                var toc = new agsjs.dijit.TOC({
                    map: map,
                    layerInfos: [{
                        layer: dynmap1,
                        title: "Signs",
                        slider: true
                    }]
                }, 'tocDiv');
                toc.startup();
                var legend = new esri.dijit.Legend({
                    map: map,
                    layerInfos: [{ layer: dynmap1, title: "" }]
                }, "legendDiv");
                legend.startup();
0 Kudos
DavideLimosani
Frequent Contributor
very nice viewer. I'm wondering ... is there any license problem using Google basemaps?

thank you.

Davide
0 Kudos