legend with dijit/form/DropDownButton

ToddFagin · ‎11-13-2015

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.

ToddFagin · ‎11-18-2015

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>

View solution in original post

ToddFagin · ‎11-18-2015

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>