legend with dijit/form/DropDownButton

ToddFagin — Fri, 13 Nov 2015 21:57:22 GMT

Greetings,

I am very new to the ArcGIS API for Javascript and am by no means a programmer. Nonetheless, I have been fairly successful at finding existing code and modifying it to my needs. That is, until now.

I want something that I think should be simple and straightforward. However, despite looking high and low, I cannot find a good code sample. I would like a button that, when clicked, shows or hides a legend (or TOC). Indeed, I have seen multiple examples of this in WebAppBuilder applications and elsewhere, but it has not been easy to tease through the code. Surely, some others have done this.

It seems to me that my answer should be in "dijit/form/DropDownButton." However, this newbie cannot seem to get it to work. My guess is I am overlooking the obvious (or, perhaps, I am approaching it all wrong).

Your assistance would be greatly appreciated.

I have attached an example of my failed attempt.

Thanks in advance.

Re: legend with dijit/form/DropDownButton

ToddFagin — Sat, 11 Dec 2021 14:14:47 GMT

I posted a similar question in another thread regarding dojo/fx/toggle. Interestingly, this question was answered in that thread by @Robert Scheitlin, GISP. I will provide his solution below.

<!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>

topic legend with dijit/form/DropDownButton in ArcGIS JavaScript Maps SDK Questions

legend with dijit/form/DropDownButton

Re: legend with dijit/form/DropDownButton