Nliu's TOC with dropdown question

ToddFagin · ‎11-25-2015

Happy Thanksgiving week to all stateside (and beyond) and good day to everyone else.

I am slowly teaching myself (with the help from the user community) the JS API. It seems for every two steps forward, I am taking a step back. Thanks to the insight of others, I was recently able to successfully associate a legend with a dropdown button. I decided to give this a whirl with Nliu's and got it working--sort of.

Currently, it functions just fine. However, I wish to associate it with other widgets. When I include these, the TOC fails to appear. After stripping the code down to its bare minimum, I have discovered that whenever I include parser.parse(); it fails. However, when I comment it out, it works just fine. I had hoped that the inclusion of parseOnLoad: false, would solve my issues, but it did not.

Obviously, I am making yet another newbie mistake. It is, nonetheless, important that I fix this so I can include with my other widgets--and also learn more about the JS API.

I have condensed the code and stuck it in a single file below. Any assistance and guidance is greatly appreciated.

<!DOCTYPE html>  
<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>  
    <title>Toggle Legend</title>  
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">  
    <style>  
      html, body, #map {  
        height: 100%;  
        margin: 0;  
      }  
      #toc-wrapper {  
        position: absolute;  
        left: 25px;  
        top: 70px;
        //bottom: 25px;  
        padding: 10px;  
        background-color: #fff;  
      }  
      #tocButton {  
        position: absolute;  
        left: 25px; 
        top: 25px; 
        //bottom: 185px;  
        padding: 10px;  
        background-color: #fff;  
        z-index: 100;  
      }  
      //classes to style the legend
      .esriLegendLayerLabel{  
        font-family: Helvetica Neue,Helvetica,Arial,sans-serif;  
        color:red;  
      }  
      .esriLegendServiceLabel{  
        font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
        font-size: 12px;  
        color:green;  
      }  
      .esriLegendService{  
        font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
        font-size: 11px; 
        color: #33A7DE;  
        font-weight:bold;  
      }
    </style>
     <script>  
        var dojoConfig = {
            parseOnLoad: false,   
            packages: [{  
                name: "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.14/"></script>  
    <script>  
      require([  
        "esri/map",
        "esri/config",  
        "esri/layers/FeatureLayer", 
        "esri/InfoTemplate", 
        "esri/renderers/UniqueValueRenderer",  
        "esri/symbols/SimpleMarkerSymbol",  
        "esri/Color",  
        "dojo/fx/Toggler",   
        "dojo/fx",
        "dojo/_base/array",   
        "dojo/dom",
        "dojo/dom-geometry",    
        "dojo/on",
        "dojo/parser",
        "dijit/registry",
        "agsjs/dijit/TOC",   
        "dojo/domReady!"  
      ], function(
            Map,
            esriConfig,   
          FeatureLayer, 
          InfoTemplate,  
          UniqueValueRenderer,   
          SimpleMarkerSymbol,   
          Color,   
          Toggler,   
          coreFx,   
          arrayUtils,   
          dom,
          domGeom,    
          on,
          parser,
          registry,
          TOC    
          ) {
              
        //parser.parse(); //Doesn't seem to work with Nianwie's TOC. I don't understand why; remove it and the toolbar disappears!!!
                
        var map = new Map("map", {  
          basemap:"gray",  
          center: [-98.435731, 35.222876],  
          zoom: 7,  
          logo: false,  
          slider: false  
        });  
       

        var np = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0");
        
        var renderer = new UniqueValueRenderer(null, "Type");
        
        var symbol1 = new SimpleMarkerSymbol();
        symbol1.setColor(new Color("#ed5151"));
        renderer.addValue("National Park", symbol1);
        
        var symbol2 = new SimpleMarkerSymbol();
        symbol2.setColor(new Color("#149ece"));
        renderer.addValue("National Monument", symbol2);
        np.setRenderer(renderer);
        
        map.addLayers([np]);
          
        //add the legend Superfluous with TOC
        /*  map.on("layers-add-result", function (evt) {
            var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
              return {layer:layer.layer, title:layer.layer.name};
            });
            if (layerInfo.length > 0) {
              var legend = new Legend({
                map: map,
                layerInfos: layerInfo
              }, "legend");
              legend.startup();
            }
            
          });*/
          
        // Add Table of Contents   
        map.on('layers-add-result', function (evt) {  
            try {  
                var toc = new TOC({  
                    map: map,  
                     layerInfos: [{  
                        layer: np,  
                        title: "National Parks",
                        //noLegend:true, IF DON'T WANT TO SHOW LEGEND
                        slider: true //This doesn't appear to work with FeatureLayers!!!   
                     }]  
                     }, "toc");  
                      toc.startup();  
                         toc.on("load", function () {  
                         console.log("TOC loaded");  
                     });  
            }  
             catch (e) { console.error(e.message); }  
          });          
         
          
          
          var isClicked = true;    //this, along with display none set in the div style ensure it is not shown by default  
          var tocToggler = new Toggler({  
            node: "toc-wrapper",   
            showFunc: coreFx.wipeIn,  
            hideFunc: coreFx.wipeOut  
          });  
          on(dom.byId("tocButton"), "click", function(e){  
            if(isClicked===false){  
               tocToggler.hide();  
              isClicked=true;  
          }  
          else{  
              tocToggler.show();  
              isClicked=false;  
          }  
         });          
          
          
      });  
    </script>  
  </head>  
  <body>  
    <button type="button" id="tocButton" title="Hide/Show Layer List">Toggle Layer List</button>      
    <div id="map"></div>
    <div id="tocDiv"></div>  
    <div id="toc-wrapper" style="display: none;">  
      <div id="toc" dojoType="dijit.layout.ContentPane" style="overflow:auto;width:275px;height:350px;vertical-align:top;"></div>   
    </div>  
  </body>  
</html>

RobertScheitlin__GISP · ‎11-25-2015

Todd,

Here is the corrected code:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Toggle Legend</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/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,
    #map {
      height: 100%;
      margin: 0;
    }

    #toc-wrapper {
      position: absolute;
      left: 25px;
      top: 70px;
      //bottom: 25px;
      padding: 10px;
      background-color: #fff;
    }

    #tocButton {
      position: absolute;
      left: 25px;
      top: 25px;
      //bottom: 185px;
      padding: 10px;
      background-color: #fff;
      z-index: 100;
    }

    //classes to style the legend
    .esriLegendLayerLabel {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      color: red;
    }

    .esriLegendServiceLabel {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 12px;
      color: green;
    }

    .esriLegendService {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 11px;
      color: #33A7DE;
      font-weight: bold;
    }
  </style>
  <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: "http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs"
      }
    };
  </script>

  <script src="http://js.arcgis.com/3.12/"></script>
  <script>
    require([
        "esri/map",
        "esri/config",
        "esri/layers/FeatureLayer",
        "esri/InfoTemplate",
        "esri/renderers/UniqueValueRenderer",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/Color",
        "dojo/fx/Toggler",
        "dojo/fx",
        "dojo/_base/array",
        "dojo/dom",
        "dojo/dom-geometry",
        "dojo/on",
        "dojo/parser",
        "dijit/registry",
        "agsjs/dijit/TOC",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function (
      Map,
      esriConfig,
      FeatureLayer,
      InfoTemplate,
      UniqueValueRenderer,
      SimpleMarkerSymbol,
      Color,
      Toggler,
      coreFx,
      arrayUtils,
      dom,
      domGeom,
      on,
      parser,
      registry,
      TOC
    ) {

      // call the parser to create the dijit layout dijits
      parser.parse(); // note djConfig.parseOnLoad = false;

      var map = new Map("map", {
        basemap: "gray",
        center: [-98.435731, 35.222876],
        zoom: 7,
        logo: false,
        slider: false
      });


      var np = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0");

      var renderer = new UniqueValueRenderer(null, "Type");

      var symbol1 = new SimpleMarkerSymbol();
      symbol1.setColor(new Color("#ed5151"));
      renderer.addValue("National Park", symbol1);

      var symbol2 = new SimpleMarkerSymbol();
      symbol2.setColor(new Color("#149ece"));
      renderer.addValue("National Monument", symbol2);
      np.setRenderer(renderer);

      //add the legend Superfluous with TOC
      /*  map.on("layers-add-result", function (evt) {
          var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
            return {layer:layer.layer, title:layer.layer.name};
          });
          if (layerInfo.length > 0) {
            var legend = new Legend({
              map: map,
              layerInfos: layerInfo
            }, "legend");
            legend.startup();
          }

        });*/

      // Add Table of Contents
      map.on('layers-add-result', function (evt) {
        try {
          var toc = new TOC({
            map: map,
            layerInfos: [{
              layer: np,
              title: "National Parks",
              slider: true
            }]
          }, "tocNode");
          toc.startup();
          toc.on("load", function () {
            console.log("TOC loaded");
          });
        } catch (e) {
          console.error(e.message);
        }
      });

      map.addLayers([np]);

      var isClicked = true; //this, along with display none set in the div style ensure it is not shown by default
      var tocToggler = new Toggler({
        node: "toc-wrapper",
        showFunc: coreFx.wipeIn,
        hideFunc: coreFx.wipeOut
      });
      on(dom.byId("tocButton"), "click", function (e) {
        if (isClicked === false) {
          tocToggler.hide();
          isClicked = true;
        } else {
          tocToggler.show();
          isClicked = false;
        }
      });


    });
  </script>
</head>

<body>
  <button type="button" id="tocButton" title="Hide/Show Layer List">Toggle Layer List</button>
  <div id="map"></div>
  <div id="toc-wrapper" style="display: none;">
    <div id="toc" data-dojo-type="dijit/layout/ContentPane" style="overflow:auto;width:275px;height:350px;vertical-align:top;">
      <div id="tocNode"></div>
    </div>
  </div>
</body>

</html>

View solution in original post

RobertScheitlin__GISP · ‎11-25-2015

Todd,

Here is the corrected code:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Toggle Legend</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/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,
    #map {
      height: 100%;
      margin: 0;
    }

    #toc-wrapper {
      position: absolute;
      left: 25px;
      top: 70px;
      //bottom: 25px;
      padding: 10px;
      background-color: #fff;
    }

    #tocButton {
      position: absolute;
      left: 25px;
      top: 25px;
      //bottom: 185px;
      padding: 10px;
      background-color: #fff;
      z-index: 100;
    }

    //classes to style the legend
    .esriLegendLayerLabel {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      color: red;
    }

    .esriLegendServiceLabel {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 12px;
      color: green;
    }

    .esriLegendService {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 11px;
      color: #33A7DE;
      font-weight: bold;
    }
  </style>
  <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: "http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs"
      }
    };
  </script>

  <script src="http://js.arcgis.com/3.12/"></script>
  <script>
    require([
        "esri/map",
        "esri/config",
        "esri/layers/FeatureLayer",
        "esri/InfoTemplate",
        "esri/renderers/UniqueValueRenderer",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/Color",
        "dojo/fx/Toggler",
        "dojo/fx",
        "dojo/_base/array",
        "dojo/dom",
        "dojo/dom-geometry",
        "dojo/on",
        "dojo/parser",
        "dijit/registry",
        "agsjs/dijit/TOC",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function (
      Map,
      esriConfig,
      FeatureLayer,
      InfoTemplate,
      UniqueValueRenderer,
      SimpleMarkerSymbol,
      Color,
      Toggler,
      coreFx,
      arrayUtils,
      dom,
      domGeom,
      on,
      parser,
      registry,
      TOC
    ) {

      // call the parser to create the dijit layout dijits
      parser.parse(); // note djConfig.parseOnLoad = false;

      var map = new Map("map", {
        basemap: "gray",
        center: [-98.435731, 35.222876],
        zoom: 7,
        logo: false,
        slider: false
      });


      var np = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0");

      var renderer = new UniqueValueRenderer(null, "Type");

      var symbol1 = new SimpleMarkerSymbol();
      symbol1.setColor(new Color("#ed5151"));
      renderer.addValue("National Park", symbol1);

      var symbol2 = new SimpleMarkerSymbol();
      symbol2.setColor(new Color("#149ece"));
      renderer.addValue("National Monument", symbol2);
      np.setRenderer(renderer);

      //add the legend Superfluous with TOC
      /*  map.on("layers-add-result", function (evt) {
          var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
            return {layer:layer.layer, title:layer.layer.name};
          });
          if (layerInfo.length > 0) {
            var legend = new Legend({
              map: map,
              layerInfos: layerInfo
            }, "legend");
            legend.startup();
          }

        });*/

      // Add Table of Contents
      map.on('layers-add-result', function (evt) {
        try {
          var toc = new TOC({
            map: map,
            layerInfos: [{
              layer: np,
              title: "National Parks",
              slider: true
            }]
          }, "tocNode");
          toc.startup();
          toc.on("load", function () {
            console.log("TOC loaded");
          });
        } catch (e) {
          console.error(e.message);
        }
      });

      map.addLayers([np]);

      var isClicked = true; //this, along with display none set in the div style ensure it is not shown by default
      var tocToggler = new Toggler({
        node: "toc-wrapper",
        showFunc: coreFx.wipeIn,
        hideFunc: coreFx.wipeOut
      });
      on(dom.byId("tocButton"), "click", function (e) {
        if (isClicked === false) {
          tocToggler.hide();
          isClicked = true;
        } else {
          tocToggler.show();
          isClicked = false;
        }
      });


    });
  </script>
</head>

<body>
  <button type="button" id="tocButton" title="Hide/Show Layer List">Toggle Layer List</button>
  <div id="map"></div>
  <div id="toc-wrapper" style="display: none;">
    <div id="toc" data-dojo-type="dijit/layout/ContentPane" style="overflow:auto;width:275px;height:350px;vertical-align:top;">
      <div id="tocNode"></div>
    </div>
  </div>
</body>

</html>

ToddFagin · ‎11-25-2015

Fantastic, Robert. Many thanks. I see you even got the slider working, too,

I need to put this side by side with my code so I can see where I stumbled, but it is good to know this is now working as I had hoped.

Again, many thanks.