AnsweredAssumed Answered

Nliu's TOC with dropdown question

Question asked by tfagin on Nov 25, 2015
Latest reply on Nov 25, 2015 by tfagin

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> 

Outcomes