enhance_legend/index.html

<!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>Data Visualization - Enhancement: Legend</title>
    <link rel="stylesheet" href="//js.arcgis.com/3.11/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
      }
      #info {
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 10px;
        background-color: #fff;
      }
    </style>
    <script src="//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/domReady!"
      ], function(Map, FeatureLayer, UniqueValueRenderer, SimpleMarkerSymbol, Color, Legend) {
        var map = new Map("map", {
          basemap: "gray",
          center: [-100, 40],
          zoom: 5
        });
        
        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();
      });
    </script>
  </head>
  <body>
    <div id="map"></div>
    <div id="info">
      <div id="legend"></div>
    </div>
  </body>
</html>