topic Re: dojo/fx/toggler on legend div in ArcGIS JavaScript Maps SDK Questions

dojo/fx/toggler on legend div

ToddFagin — Sat, 11 Dec 2021 23:57:55 GMT

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>

Re: dojo/fx/toggler on legend div

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:57:58 GMT

Todd,

You have an issue of your requires and vars not being in sequence. Here is the correction ("dojo/_base/array", missing):

require([
        "esri/map",
        "esri/layers/FeatureLayer",
        "esri/renderers/UniqueValueRenderer",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/Color",
        "esri/dijit/Legend",
        "dojo/fx/Toggler",
        "dojo/fx",
        "dojo/_base/array",
        "dojo/dom",
        "dojo/on",
        "dojo/domReady!"
      ], function (Map,
      FeatureLayer,
      UniqueValueRenderer,
      SimpleMarkerSymbol,
      Color,
      Legend,
      Toggler,
      coreFx,
      arrayUtils,
      dom,
      on
    ) {

Re: dojo/fx/toggler on legend div

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:58:01 GMT

Todd,

Here is another option using the dojo dropdown button:

<!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.14/esri/css/esri.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      margin: 0;
    }

    #legend {
      padding: 10px;
      background-color: #fff;
    }

    #dropDownButtonContainer {
      position: absolute;
      top: 25px;
      left: 25px;
      z-index: 100;
    }
  </style>
  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
    require([
        "esri/map",
        "esri/layers/FeatureLayer",
        "esri/renderers/UniqueValueRenderer",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/Color",
        "esri/dijit/Legend",
        "dijit/form/DropDownButton",
        "dojo/dom",
        "dojo/on",
        "dojo/parser",
        "dojo/domReady!"
      ], function (
        Map,
        FeatureLayer,
        UniqueValueRenderer,
        SimpleMarkerSymbol,
        Color,
        Legend,
        DropDownButton,
        dom,
        on,
        parser
    ) {
      parser.parse();
      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 myButton = new DropDownButton({
        label: "Legend",
        dropDown: legend
    });
      dom.byId("dropDownButtonContainer").appendChild(myButton.domNode);
    });
  </script>
</head>

<body class="claro">
  <div id="legend" style="display: none;"></div>
  <div id="dropDownButtonContainer"></div>
  <div id="map"></div>
</body>

</html>

Re: dojo/fx/toggler on legend div

ToddFagin — Wed, 18 Nov 2015 14:50:40 GMT

Thank you very much. I will attempt both of these and report back on my findings.

I greatly appreciate the assistance.

Todd

Todd Fagin

Oklahoma Natural Heritage Inventory/

Department of Geography and Environmental Sustainability