checkbox are not working in toc

2402
5
02-04-2016 11:11 PM
veenahosur1
New Contributor II

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>  
Tags (2)
0 Kudos
5 Replies
RobertScheitlin__GISP
MVP Emeritus

Veena,

   Your code seems to be missing.

0 Kudos
veenahosur1
New Contributor II

    <!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:/..../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> 

    <body class="soria"> 

        <div id="mapDiv"> 

            <div id="tocDiv"></div> 

        </div> 

    </body> 

    </html> 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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/PublicSafetyOperationalLayer...", {
        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>
veenahosur1
New Contributor II

its not working for me

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos