AnsweredAssumed Answered

Help!! TOC not showing up.....

Question asked by cosgisadmin on Sep 29, 2014
Latest reply on Oct 9, 2014 by cosgisadmin

I'm trying to learn programming with ArcGIS API for Javascript. This is my first attempt at this so please excuse my ignorance.

 

Anyhow, what I want is very simple...use a dynamic map service with 23 layers (yes...I know...but my audience "needs them all") to be able to check off/on within a TOC.

 

Thus, I downloaded the Table of Contents (TOC)/Legend Widget for JavaScript API and incorporated into my script. I haven't been very successful at all. I'm using Notepad ++ and have tried opening it with several different browsers (Firefox v. 31, Chrome v. 37, & IE v.8). Debugging with Chrome's developer tools mostly.

 

I've put the TOC widget folder and .html on my webserver to test. No results! Not happening! What I'm I doing wrong?

 

This is my script so far:

 

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Blabla....</title>

 

  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">   

    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">

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

    <style>

      html, body

.

.

.

.

    </style>

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

  </script>

   

    <script type="text/javascript">

      // helpful for understanding dojoConfig.packages vs. dojoConfig.paths:

     // http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/

      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(/\/[^/]+$/, '') + '/../src/agsjs'

      }

     };

    </script>

 

   <script type="text/javascript">

  var map, toc, dynaLayer1;

   

       require(["dojo/_base/connect",

     "dojo/on",

        "esri/map",

        "esri/dijit/Geocoder",

      "esri/geometry/Extent",

      "esri/layers/FeatureLayer",

      "esri/layers/ArcGISTiledMapServiceLayer",

  

  "esri/symbols/SimpleFillSymbol",

     "esri/renderers/ClassBreaksRenderer",

     "agsjs/dijit/TOC",

 

 

        "esri/graphic",

        "esri/symbols/SimpleMarkerSymbol",

        "esri/geometry/screenUtils",

 

 

        "dojo/dom",

        "dojo/dom-construct",

        "dojo/query",

        "dojo/_base/Color",

 

  "esri/dijit/Scalebar",

  "esri/dijit/HomeButton",

  "esri/dijit/OverviewMap",

  "dijit/layout/BorderContainer",

  "dijit/layout/ContentPane",

 

  "esri/dijit/BasemapGallery",

  "esri/arcgis/utils",

  "dojo/parser",

  "esri/layers/ArcGISDynamicMapServiceLayer",

 

  "dojo/fx",

        "dojo/domReady!"

        ], function(connect, on,

        Map, Geocoder, Extent, FeatureLayer, ArcGISTiledMapServiceLayer, SimpleFillSymbol,

  ClassBreaksRenderer, TOC,

        Graphic, SimpleMarkerSymbol, screenUtils,

        dom, domConstruct, query, Color, Scalebar, HomeButton, OverviewMap,

  BorderContainer, ContentPane, BasemapGallery, arcgisUtils, parser, ArcGISDynamicMapServiceLayer

        ) {

     // call the parser to create the dijit layout dijits

              parser.parse(); // note djConfig.parseOnLoad = false;

  

        // create a map

        var map = new Map("map", {

          sliderOrientation : "horizontal",

   basemap: "topo",

          center: [-93.745776,32.513614],

          zoom: 14

        });

 

  //variable REST service Shreveport as a layer

  dynaLayer1 = new ArcGISDynamicMapServiceLayer("http://noonecares/rest/services/MapServer", {

        opacity: 0.9

              });@

 

 

alert("1");  //shows up when it runs

  

  //Add a TOC widget

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

         // overwrite the default visibility of service.

         // TOC will honor the overwritten value.

        dynaLayer1.setVisibleLayers([3, 7, 8, 23]);

          //  {

          toc = new TOC({

           map: map,

           layerInfos: [{

            layer: dynaLayer1,

            title: "Base Map"

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

            //slider: true, // whether to display a transparency slider.

  //autoToggle: true //whether to automatically collapse when turned off, and expand when turn on for groups layers. default true.

             }]

           }, 'tocDiv');

           toc.startup();

 

 

alert("2"); //it skipped when it runs

   

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

alert("3"); //it skipped when it runs

                if (console)

                    console.log('TOC loaded');

                    dom.byId("InsertNewLayer").disabled = false;

                 });

              });

          map.addLayers([dynaLayer1]);

 

 

alert("4"); //shows up when it runs

  

    on(dom.byId("SetOpacity"), 'click', function(evt){

                if (dynaLayer1 != null) {

                  dynaLayer1.setOpacity(0.2);

                }

              });

  //adding geocoder widget

        var geocoder =  new Geocoder({

          arcgisGeocoder: {

            placeholder: "Find an address"

          },

          autoComplete: true,

          map: map

        }, dom.byId("search"));

 

        map.on("load", enableSpotlight);

        geocoder.on("select", showLocation);

        geocoder.on("clear", removeSpotlight);

 

  //adding scalebar widget

     var scalebar = new Scalebar({

          map: map,

   attachTo: "bottom-left",

          scalebarUnit: "dual"

       });

   

    //adding home button widget

    var home = new HomeButton({

    map: map

    }, "HomeButton");

    home.startup();

   

    //adding overview map widget

    var overviewMapDijit = new OverviewMap({

        map: map,

        visible: true,

  attachTo: "bottom-right",

  opacity: .40

        });

       overviewMapDijit.startup(); 

   

    //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps

       var basemapGallery = new BasemapGallery({

        showArcGISBasemaps: true,

        map: map

        }, "basemapGallery");

        basemapGallery.startup();

        basemapGallery.on("error", function(msg) {

        console.log("basemap gallery error:  ", msg);

       });

   

        //showing Lat, Long location on the bottom of map

        function showLocation(evt) {

          map.graphics.clear();

          var point = evt.result.feature.geometry;

          var symbol = new SimpleMarkerSymbol().setStyle(

            SimpleMarkerSymbol.STYLE_SQUARE).setColor(

            new Color([255,0,0,0.5])

          );

          var graphic = new Graphic(point, symbol);

          map.graphics.add(graphic);

 

 

          map.infoWindow.setTitle("Search Result");

          map.infoWindow.setContent(evt.result.name);

          map.infoWindow.show(evt.result.feature.geometry);

 

 

          var spotlight = map.on("extent-change", function(extentChange) {

            var geom = screenUtils.toScreenGeometry(map.extent, map.width, map.height, extentChange.extent);

            var width = geom.xmax - geom.xmin;

            var height = geom.ymin - geom.ymax;

 

 

            var max = height;

            if ( width > height ) {

                max = width;

            }

 

 

            var margin = '-' + Math.floor(max/2) + 'px 0 0 -' + Math.floor(max/2) + 'px';

 

 

            query(".spotlight").addClass("spotlight-active").style({

              width: max + "px",

              height: max + "px",

              margin: margin

            });

            spotlight.remove();

          });

        }

        //adding point spot holder

        function enableSpotlight() {

          var html = "<div id='spotlight' class='spotlight'></div>"

          domConstruct.place(html, dom.byId("map_container"), "first");

        }

        //removing point spot holder

  function removeSpotlight() {

          query(".spotlight").removeClass("spotlight-active");

          map.infoWindow.hide();

          map.graphics.clear();

        }

      });

 

    </script>

  </head>

  <body class="claro">

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

    <div id="header" data-dojo-type="dijit/layout/ContentPane" region="top">

     <div>

             <ul style="margin:15px">

              <b>Blabla....</b>

    <div id="search"></div>

             </ul>     

        </div>

  </div>

  <div data-dojo-type="dijit/layout/ContentPane" id="leftPane" region="left" splitter="true">

        <div id="tocDiv">

        </div>      

    </div>

 

  <div id="map" data-dojo-type="dijit/layout/ContentPane" region="center">

   

     <div id="HomeButton"></div>

  <div style="position:absolute; right:50px; top:10px; z-Index:999;">

  <div data-dojo-type="dijit/TitlePane"

             data-dojo-props="title:'Switch Basemap', closable:false, open:false">

           <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">

               <div id="basemapGallery"></div>

       </div>

         </div>

     </div>

  </div>

  </div>

  </body>

</html>

Outcomes