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

BasicViewer with TOC

KevinMacLeod1

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.

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

Accepted answers

All comments

NianweiLiu

@dmcgill:
Your folder structure is not typical. It can work but you need know more how dojo loads. Run firebug and watch network tab you should see many red 401s. Move files to location that matches the request, normally within same folder as app.

@dlimos:
You should check Google's Term of use for details as they change from time to time. In a nut shell, if your app is publicly accessible and you are not charging user a fee you can use the free license with its quota limit, everything else, such as deploying in Intranet, requires a business license, which is charged by API load count.

DavideLimosani

very nice viewer. I'm wondering ... is there any license problem using Google basemaps?

thank you.

Davide

DavidMcGill

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

sample1.jpg

DavidAshton

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

KevinMacLeod1

Thanks nliu that worked, I perused all scripts. Very nice work, and thank you.

NianweiLiu

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.

KevinMacLeod1

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!

GaganJaswal

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.

GaganJaswal

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.

NianweiLiu

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.

会話に参加する

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

クイックリンク

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