topic Re: checkbox are not working in toc in ArcGIS JavaScript Maps SDK Questions

checkbox are not working in toc

veenahosur1 — Fri, 10 Dec 2021 23:07:11 GMT

i have toc for dynamic and feature layers.its displaying properly but when i checked on and off checkbox nothing is chaning on layers

below is code:

    <!DOCTYPE html>  
    <html>  
    <head>  
        <title>Create a Map</title>  
        <meta http-equiv="content-type" content="text/html; charset=utf-8">  
        <meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">  
        <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/soria/soria.css">  
        <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">  
        <!--<link href="agsjs/dijit/css/TOC.css" rel="stylesheet" type="text/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, #mapDiv {  
                padding: 0;  
                margin: 0;  
                height: 100%;  
                width: 100%;  
                overflow: hidden;  
            }  
     
            #tocDiv {  
                z-index: 50;  
                position: absolute;  
                top: 0%;  
                left: 0%;  
                width: 300px;  
                height: auto;  
                background-color: White;  
            }  
    
            #divDialogProcess {  
                z-index: 50;  
                position: absolute;  
                right: 0%;  
                top: 0%;  
                background-color: White;  
            }  
        </style>  
        <script>  
            var dojoConfig = {  
                packages: [{  
                    name: "agsjs",  
                    "location": '/2.10/build/agsjs' // for xdomain load  
                }]  
            };  
        </script>  
      
      
        <script src="http://js.arcgis.com/3.11/"></script>  
        <script>  
            var map, tiled, pointFeatureLayer, operationalLayer;  
            require(["dojo/_base/connect",
  "esri/map", "esri/config",  
                     "esri/geometry/Extent",  
                     "esri/layers/ArcGISDynamicMapServiceLayer",  
                     "esri/layers/FeatureLayer",  
                     "esri/renderers/ClassBreaksRenderer",  
                     "esri/symbols/SimpleFillSymbol",  
                     "esri/tasks/GeometryService",  
                     "dojo/dom",  
                     "dojo/dom-geometry",  
                     "dojo/fx",  
                     "dojo/on",  
                     "dojo/parser",  
                     "dojo/_base/Color",  
                     "agsjs/dijit/TOC",
                     "dijit/layout/BorderContainer", 
          "dijit/layout/ContentPane",  
                     "dojo/domReady!"], function (connect,Map, esriConfig, Extent, ArcGISDynamicMapServiceLayer, FeatureLayer, ClassBreaksRenderer, SimpleFillSymbol, GeometryService, dom, domGeom, coreFx, on, parser, Color, TOC  
            ) {  
      
                    map = new Map("mapDiv", {
                     center: [77.2, 14],
                     zoom: 7,
                     basemap: "topo",
                     slider: false
                    
                 });
      
                         operationalLayer = new ArcGISDynamicMapServiceLayer("http://164.100.133.131/arcgisserver/rest/services/CRD/CRD1/MapServer", { id: "Operational", opacity: 0.5 });  
                        
                         pointFeatureLayer = new FeatureLayer("http://164.100.133.131/arcgisserver/rest/services/CRD/CRD2/FeatureServer/0", { id: "Points"
                         
  });  
                       
                         map.addLayers([operationalLayer, pointFeatureLayer]);  
      
                         // Add Table of Contents Start  
                       map.on('layers-add-result', function (evt) {  
                             try {  
    
                                 var toc = new TOC({  
                                     map: map,  
                                     layerInfos: [{  
                                         layer: pointFeatureLayer,  
                                         title: "My Feature"  
                                     }, {  
                                         layer: operationalLayer,  
                                         title: "Dynamic Map"  
                                     }]  
                                 }, "tocDiv");  
                                 toc.startup();  
      
                                 toc.on("load", function () {  
                                     console.log("TOC loaded");  
                                 });   
                             }  
                             catch (e) { console.error(e.message); }  
      
      
                         });   
                     }  
            );  
        </script>  
    </head>  
    <body class="soria">  
        <div id="mapDiv">  
            <div id="tocDiv"></div>  
        </div>  
    </body>  
    </html>

Re: checkbox are not working in toc

RobertScheitlin__GISP — Fri, 05 Feb 2016 13:48:57 GMT

Veena,

Your code seems to be missing.

Re: checkbox are not working in toc

veenahosur1 — Sat, 06 Feb 2016 04:50:51 GMT

<!DOCTYPE html>

<html>

<head>

<title>Create a Map</title>

<style>

html, body, #mapDiv {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

overflow: hidden;

}

#tocDiv {

z-index: 50;

position: absolute;

top: 0%;

left: 0%;

width: 300px;

height: auto;

background-color: White;

}

#divDialogProcess {

z-index: 50;

position: absolute;

right: 0%;

top: 0%;

background-color: White;

}

</style>

var dojoConfig = {

packages: [{

name: "agsjs",

"location": '/2.10/build/agsjs' // for xdomain load

}]

};

</script>

var map, tiled, pointFeatureLayer, operationalLayer;

require(["dojo/_base/connect",

"esri/map", "esri/config",

"esri/geometry/Extent",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/FeatureLayer",

"esri/renderers/ClassBreaksRenderer",

"esri/symbols/SimpleFillSymbol",

"esri/tasks/GeometryService",

"dojo/dom",

"dojo/dom-geometry",

"dojo/fx",

"dojo/on",

"dojo/parser",

"dojo/_base/Color",

"agsjs/dijit/TOC",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dojo/domReady!"], function (connect,Map, esriConfig, Extent, ArcGISDynamicMapServiceLayer, FeatureLayer, ClassBreaksRenderer, SimpleFillSymbol, GeometryService, dom, domGeom, coreFx, on, parser, Color, TOC

) {

map = new Map("mapDiv", {

center: [77.2, 14],

zoom: 7,

basemap: "topo",

slider: false

});

operationalLayer = new ArcGISDynamicMapServiceLayer("http:/..../MapServer", { id: "Operational", opacity: 0.5 });

pointFeatureLayer = new FeatureLayer("http://../FeatureServer/0", { id: "Points"

});

map.addLayers([operationalLayer, pointFeatureLayer]);

// Add Table of Contents Start

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

try {

var toc = new TOC({

map: map,

layerInfos: [{

layer: pointFeatureLayer,

title: "My Feature"

}, {

layer: operationalLayer,

title: "Dynamic Map"

}]

}, "tocDiv");

toc.startup();

toc.on("load", function () {

console.log("TOC loaded");

});

}

catch (e) { console.error(e.message); }

});

}

);

</script>

</head>

</div>

</body>

</html>

Re: checkbox are not working in toc

RobertScheitlin__GISP — Fri, 10 Dec 2021 23:07:14 GMT

Veena,

Here is you code working:

<!DOCTYPE html>
<html>

<head>
  <title>Create a Map</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/soria/soria.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/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,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    #tocDiv {
      z-index: 50;
      position: absolute;
      top: 0%;
      left: 0%;
      width: 300px;
      height: auto;
      background-color: White;
    }

    #divDialogProcess {
      z-index: 50;
      position: absolute;
      right: 0%;
      top: 0%;
      background-color: White;
    }
  </style>
  <script>
    var dojoConfig = {
      paths: {
        agsjs: "http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs"
      }
    };
  </script>

  <script src="http://js.arcgis.com/3.15/"></script>
  <script>
    var map, tiled, pointFeatureLayer, operationalLayer;
    require([
      "esri/map",
      "esri/config",
      "esri/geometry/Extent",
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/renderers/ClassBreaksRenderer",
      "esri/symbols/SimpleFillSymbol",
      "esri/tasks/GeometryService",
      "dojo/dom",
      "dojo/dom-geometry",
      "dojo/fx",
      "dojo/on",
      "dojo/parser",
      "dojo/_base/Color",
      "agsjs/dijit/TOC",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojo/domReady!"
    ], function (
        Map, esriConfig, Extent, ArcGISDynamicMapServiceLayer,
        FeatureLayer, ClassBreaksRenderer, SimpleFillSymbol, GeometryService,
        dom, domGeom, coreFx, on, parser, Color, TOC
      ) {
      map = new Map("mapDiv", {
        center: [77.2, 14],
        zoom: 7,
        basemap: "topo",
        slider: false
      });

      operationalLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyOperationalLayers/MapServer", {
        id: "Operational",
        opacity: 0.5
      });

      pointFeatureLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/1", {
        id: "Points"
      });

      map.addLayers([operationalLayer, pointFeatureLayer]);

      // Add Table of Contents Start
      map.on('layers-add-result', function (evt) {
        try {
          var toc = new TOC({
            map: map,
            layerInfos: [{
              layer: pointFeatureLayer,
              title: "My Feature"
                                     }, {
              layer: operationalLayer,
              title: "Dynamic Map"
                                     }]
          }, "tocDiv");
          toc.startup();

          toc.on("load", function () {
            console.log("TOC loaded");
          });
        } catch (e) {
          console.error(e.message);
        }
      });
    });
  </script>
</head>

<body class="soria">
  <div id="mapDiv">
    <div id="tocDiv"></div>
  </div>
</body>

</html>

Re: checkbox are not working in toc

veenahosur1 — Mon, 08 Feb 2016 04:40:43 GMT

its not working for me

Re: checkbox are not working in toc

RobertScheitlin__GISP — Mon, 08 Feb 2016 13:22:36 GMT

Veena,

The sample I provided is working and tested on my end. Did you zoom out and move to the US where the sample map service data is located? I did not adjust the maps extent from where you had it set so that it would be easier for you to just replace the service urls with your own.