AnsweredAssumed Answered

dojo/fx/toggler on legend div

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

The other day, I posted a question about hiding/showing a legend using a dropdown control. An individual elsewhere suggested I should merely hide/show the legend div using a toggler. I have subsequently successfully implemented a very basic example of hiding/showing a div using dojo/fx/Toggler. However, when I attempt to implement it with the ArcGIS API for Javascript, it doesn't work. I am fairly certain I am likely overlooking the obvious or otherwise making a newbie mistake.

 

I have posted my code example below (I have not attempted to really style it). Any assistance would be 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;
      }
      #legend-wrapper {
        position: absolute;
        left: 25px;
        bottom: 25px;
        padding: 10px;
        background-color: #fff;
      }
      #legendButton {
        position: absolute;
        left: 25px;
        bottom: 185px;
        padding: 10px;
        background-color: #fff;
        z-index: 100;
      }
    </style>
    <script src="http://js.arcgis.com/3.11/"></script>
    <script>
      require([
        "esri/map",
        "esri/layers/FeatureLayer",
        "esri/renderers/UniqueValueRenderer",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/Color",
        "esri/dijit/Legend",
        "dojo/fx/Toggler", 
        "dojo/fx", 
        "dojo/dom", 
        "dojo/on", 
        "dojo/domReady!"
      ], function(Map, 
          FeatureLayer, 
          UniqueValueRenderer, 
          SimpleMarkerSymbol, 
          Color, 
          Legend, 
          Toggler, 
          coreFx, 
          arrayUtils, 
          dom, 
          on
          ) {
        var map = new Map("map", {
          basemap:"gray",
          center: [-98.435731, 35.222876],
          zoom: 7,
          logo: false,
          slider: false
        });
        
        var layer = 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);
        layer.setRenderer(renderer);
        
        map.addLayer(layer);
        
        var legend = new Legend({
          map: map,
          layerInfos: [{
            layer: layer,
            title: "National Park Statistics 2013"
          }]
        }, "legend");
        legend.startup();
        
          var isClicked = false;    
          var legendToggler = new Toggler({
            node: "legend-wrapper", 
            showFunc: coreFx.wipeIn,
            hideFunc: coreFx.wipeOut
          });
          on(dom.byId("legendButton"), "click", function(e){
            if(isClicked===false){
               legendToggler.hide();
              isClicked=true;
          }
          else{
              legendToggler.show();
              isClicked=false;
          }
         });        
        
        
      });
    </script>
  </head>
  <body>
      <button type="button" id="legendButton">Toggle Legend</button>    
    <div id="map"></div>
    <div id="legend-wrapper">
      <div id="legend"></div>
    </div>
  </body>
</html>

Outcomes