topic Re: Legend and CheckBox in ArcGIS JavaScript Maps SDK Questions

Legend and CheckBox

RichardMoussopo — Wed, 01 Oct 2014 19:05:03 GMT

Most samples and examples I have seen so far only display the legend and check-boxes separately within different tabs. Is there a way to have them together instead of switching tabs all the time to go toggle layers on or off as image bellow ?

Re: Legend and CheckBox

TimWitt2 — Wed, 01 Oct 2014 19:06:56 GMT

Richard,

this should do it: http://www.arcgis.com/home/item.html?id=9b6280a6bfb0430f8d1ebc969276b109

Tim

Re: Legend and CheckBox

RichardMoussopo — Wed, 01 Oct 2014 20:27:59 GMT

Thank you Tim,

This link is implementing the TOC dijit using "agsjs/dijit/TOC". I am having an error with it in 3.10. The page is not showing me the error but I now that name space is the problem.

I have to say, this is a great widget. I hope I'll make it work

Re: Legend and CheckBox

KenBuja — Wed, 01 Oct 2014 21:01:10 GMT

Hi Richard,

Did you leave off the actual link?

I agree, it's a great tool and I use it on several applications.

Re: Legend and CheckBox

RichardMoussopo — Wed, 01 Oct 2014 21:47:21 GMT

So, I downloaded the folder and added to my project. Also, I have the css linked. it is not working for me still. Am I missing something?

var dojoConfig = {

paths: {

//if you want to host on your own server, download and put in folders then use path like:

agsjs: location.pathname.replace(/\/[^/]+$/, '') + '../agsjs'

}

};

</script>

and here is the script:

// begin add the legend

map.on('layers-add-result', function(evt){

// overwrite the default visibility of service.

// TOC will honor the overwritten value.

// dynaLayer1.setVisibleLayers([2, 5, 8, 11]);

try{

toc = new agsjs.dijit.TOC({

map: map,

layerInfos: [{

layer: utilitiesLayer,

title: "Utilities"

}, {

layer: roads,

title: "Roads"

//collapsed: false, // whether this root layer should be collapsed initially, default false.

//slider: false // whether to display a transparency slider.

}]

}, 'legendDiv');

toc.startup();

}

catch(ex){

alert(ex.toString());

}

})

Re: Legend and CheckBox

KenBuja — Thu, 02 Oct 2014 13:18:25 GMT

Are you doing any parsing? And are you requiring the TOC module?

Here's an example of using the widget

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Map with legend</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <link rel="stylesheet" type="text/css" href="http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs/css/agsjs.css" />
    <style>
        html, body {
            height: 97%;
            width: 98%;
            margin: 1%;
        }

        #rightPane {
            width: 20%;
        }

        #legendPane {
            border: solid #97DCF2 1px;
        }
    </style>

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

    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
        var map, layerDynamic, toc, layerInfo;

        require([
          "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer",
          "dojo/_base/array", "dojo/parser", "agsjs/dijit/TOC",
          "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
          "dijit/layout/AccordionContainer", "dojo/domReady!"
        ], function (
          Map, ArcGISDynamicMapServiceLayer,
          arrayUtils, parser, TOC
        ) {
            parser.parse();

            map = new Map("map", {
                basemap: "oceans",
                center: [-86, 30],
                zoom: 6
            });

            layerDynamic = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer", {
                id: 'Dynamic'
            });

            map.on("layers-add-result", function (evt) {
                toc = new TOC({
                    map: map,
                    layerInfos: [{
                        layer: layerDynamic,
                        title: "Legend",
                        collapsed: true
                        //layerList: layerInfo
                    }]
                }, 'legendDiv');
                toc.startup();
            });


            map.addLayers([layerDynamic]);
        });

    </script>
</head>

<body class="claro">
    <div id="content"
         data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline', gutters:true"
         style="width: 100%; height: 100%; margin: 0;">

        <div id="rightPane"
             data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region:'right'">

            <div data-dojo-type="dijit/layout/AccordionContainer">
                <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
                     data-dojo-props="title:'Legend', selected:true">
                    <div id="legendDiv"></div>
                </div>
                <div data-dojo-type="dijit/layout/ContentPane"
                     data-dojo-props="title:'Pane 2'">
                </div>
            </div>
        </div>
        <div id="map"
             data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region:'center'"
             style="overflow: hidden;">
        </div>
    </div>
</body>

</html>

Re: Legend and CheckBox

TracySchloss — Thu, 02 Oct 2014 19:15:46 GMT

I'm using the TOC dijit just fine with the 3.10 version of the API. It's the same TOC that I downloaded several months ago.

Re: Legend and CheckBox

Quynh_NhuMai — Tue, 06 Sep 2016 22:07:17 GMT

This widget is working great with API 3.17. I cannot figure out how to deactivate the checkbox on load, however. Any suggestions?

Re: Legend and CheckBox

KenBuja — Wed, 07 Sep 2016 13:02:29 GMT

You can set the visibility of the layer (setVisible) and sublayers (setVisibileLayers), which will determine which checkboxes will be turned on when the TOC is first loaded.

Re: Legend and CheckBox

Anonymous User — Wed, 07 Sep 2016 14:14:33 GMT

In this case you have two case you choose which layer should be enable at what extent and also check/ uncheck as per your need in mxd file is used to create this service.

And from javascript you can use layer enable function for layer to enable on loading or disable it