Legend and CheckBox

RichardMoussopo · ‎10-01-2014

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 ?

TimWitt2 · ‎10-01-2014

Richard,

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

Tim

RichardMoussopo · ‎10-01-2014

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

KenBuja · ‎10-01-2014

Hi Richard,

Did you leave off the actual link?

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

RichardMoussopo · ‎10-01-2014

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

}

})

KenBuja · ‎10-02-2014

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>

TracySchloss · ‎10-02-2014

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.

Quynh_NhuMai · ‎09-06-2016

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

KenBuja · ‎09-07-2016

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.

Anonymous User · ‎09-07-2016

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