title: How to display legend in bottom right corner on the map using ArGIS api for javascript
body: <p>I want to display legend icon on the bottom right of the map. On Click of the legend button, i have to display some symbols with names with out adding any layer. Can you please suggest me any sample program or link to display legend on the map</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /&gt;
      &lt;title&gt;Predominant Crop Opacity&lt;/title&gt;
      &lt;link rel="stylesheet" href="//js.arcgis.com/3.12/dijit/themes/claro/claro.css"&gt;
      &lt;link rel="stylesheet" href="//js.arcgis.com/3.12/esri/css/esri.css" /&gt;
      &lt;style&gt;
        html, body, #map {
          height: 100%;
          margin: 0;
          background-color: #000000;
        }
  
        .esriAttribution {
          background: none;
          color: #ffffff;
        }
  
        #info {
          width: 14.0625em;
          background-color: #000;
          color: #fff;
          position: absolute;
          left: 0;
          bottom: 0;
          padding-left: 10px;
          padding-top: 10px;
          font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
          border-top: 2px solid #ffffff;
          border-right: 2px solid #ffffff;
          border-top-right-radius: 20px;
        }
      &lt;/style&gt;
  
      &lt;script src="//js.arcgis.com/3.12/"&gt;&lt;/script&gt;
  
      &lt;script&gt;
        var map;
        require([
          "dojo/_base/array",
          "dojo/number",
          "esri/Color", "esri/dijit/Legend",
          "esri/geometry/Extent", "esri/InfoTemplate", "esri/layers/FeatureLayer",
          "esri/map", "esri/renderers/UniqueValueRenderer",
          "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/domReady!"
        ], function (array, number, Color, Legend, Extent, InfoTemplate, FeatureLayer, Map, UniqueValueRenderer,
          SimpleFillSymbol, SimpleLineSymbol){
  
          map = new Map("map", {
            minScale: 18489297,
            maxScale: 1245436,
            extent: new Extent({
              "xmax": -7218373,
              "xmin": -15045524,
              "ymax": 7571201,
              "ymin": 2160682,
              "spatialReference": { "wkid": 102100}
            })
          });
  
          // --------------------------------------------------------------------
          // Custom function to format the numbers for crop values
          // e.g., 126744 becomes 126,744
          // --------------------------------------------------------------------
          formatNumber = function (value, key, data){
            return number.format(value, {places: 0, locale: "en-us"});
          };
  
          var featureLayerOptions = {
            mode: FeatureLayer.MODE_AUTO,
            outFields: ["M163_07", "M172_07", "M188_07", "M193_07", "M217_07", "COUNTY", "STATE", "AREA", "M086_07"],
            infoTemplate: new InfoTemplate("${COUNTY}, ${STATE}",
              "&lt;b&gt;Corn for grain:&lt;/b&gt; ${M163_07:formatNumber}&lt;br&gt;&lt;b&gt;All wheat for grain:&lt;/b&gt; ${M172_07:formatNumber}&lt;br&gt;&lt;b&gt;Upland cotton:&lt;/b&gt; ${M188_07:formatNumber}&lt;br&gt;&lt;b&gt;Soybeans for beans:&lt;/b&gt; ${M193_07:formatNumber}&lt;br&gt;&lt;b&gt;Vegetables:&lt;/b&gt; ${M217_07:formatNumber}")
          };
          var featureLayer = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/USA_County_Crops_2007/FeatureServer/0",
            featureLayerOptions);
  
          // --------------------------------------------------------------------
          // Custom function to compute the crop that has the largest value
          // in a particular count. Using a custom function with a renderer
          // is a really powerful method of having control over symbology
          // client-side, especially if you don't have control over the service.
          // --------------------------------------------------------------------
          var uniqueValueRenderer = new UniqueValueRenderer(createSymbol("#d9d9d9"), function (graphic){
            var maxField = "Other";
            var max = 0;
  
            array.forEach(featureLayerOptions.outFields, function (field){
              if (graphic.attributes[field] &gt; max) {
                maxField = field;
                max = graphic.attributes[field];
              }
            });
  
            return maxField;
          });
  
          // --------------------------------------------------------------------
          // Helper function for creating symbols for the UniqueValueRenderer
          // --------------------------------------------------------------------
          function createSymbol(color){
            return new SimpleFillSymbol()
              .setColor(new Color(color))
              .setOutline(
              new SimpleLineSymbol().setColor(new Color("#999999")).setWidth(1)
            );
          }
  
          uniqueValueRenderer.addValue({ value: "M217_07", symbol: createSymbol("#fd7f6f"), label: "Vegetables" });
          uniqueValueRenderer.addValue({ value: "M188_07", symbol: createSymbol("#b2e061"), label: "Cotton" });
          uniqueValueRenderer.addValue({ value: "M172_07", symbol: createSymbol("#bd7ebe"), label: "Wheat" });
          uniqueValueRenderer.addValue({ value: "M193_07", symbol: createSymbol("#7eb0d5"), label: "Soybeans" });
          uniqueValueRenderer.addValue({ value: "M163_07", symbol: createSymbol("#ffb55a"), label: "Corn" });
  
          // --------------------------------------------------------------------
          // Use the average data values to control opacity
          // Field:       M086_07
          // Description: The acres of total cropland as a percentage of land area in acres.
          //
          // Standard Deviation:    28.9616022263796
          // Average:               39.457298802092
          // Standard Deviation -1: 10.495696576
          // Standard Deviation +1: 68.418901028
          //
          // For more information about statistics: see the outStatistics
          // parameter in the ArcGIS REST API Help.
          // --------------------------------------------------------------------
          uniqueValueRenderer.setOpacityInfo({
            field: "M086_07",
            stops: [
              { value: 10, opacity: 0   }, // -1 stddev,     transparent
              { value: 39, opacity: 0.5 }, // average value, 50% transparent
              { value: 68, opacity: 1   }  // +1 stddev,     completely opaque
            ]
          });
  
          featureLayer.setRenderer(uniqueValueRenderer);
          map.addLayer(featureLayer);
  
          var legend = new Legend({
            map: map,
            layerInfos: [
              {
                layer: featureLayer,
                title: "Acres harvested by type"
              }
            ]
          }, "legend");
  
          legend.startup();
        });
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;div id="info"&gt;
        &lt;div id="legend"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>For above code it is showing legend symbols without clicking on legend button . But i should display legend icon on the bottom right and on click of legend button display all the symbols.</p>