Legend and CheckBox

1497
9
10-01-2014 12:05 PM
RichardMoussopo
Occasional Contributor II

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 ?

legendCheckBox.PNG

0 Kudos
9 Replies
TimWitt2
MVP Regular Contributor
0 Kudos
RichardMoussopo
Occasional Contributor II

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

0 Kudos
KenBuja
MVP Honored Contributor

Hi Richard,

Did you leave off the actual link?

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

0 Kudos
RichardMoussopo
Occasional Contributor II

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?

<link href="agsjs/css/agsjs.css" rel="stylesheet" />

<script src="http://js.arcgis.com/3.10/"></script>

   

    <script type="text/javascript">

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

        } 

    })

0 Kudos
KenBuja
MVP Honored Contributor

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>

0 Kudos
TracySchloss
Frequent Contributor

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. 

0 Kudos
Quynh_NhuMai
New Contributor III

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

0 Kudos
KenBuja
MVP Honored Contributor

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.

AvinashPatel1
Occasional Contributor III

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