Cross-Platform JavaScript Map (dynamic legend error)

Ray_DominicMaldonado · ‎04-20-2011

Hello fellow ArcGIS Users,
I am having trouble with a JavaScript map I found online (link & code below). The maps works fine for everything I need it to do besides displaying a correct legend for more than one layer. I tried adding multiple feature layers, but only the first layer displays in the legend (top right button on map). I'm still new to this so if anyone has experience please feel free to share 🙂

http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jssamples_start.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>
      Map with Feature Layer
    </title>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2compact">
    </script>
    <style type="text/css">
      html, body
      {
        height: 100%;
        margin: 0px;
        padding: 0px;
        width: 100%;
      }
      .esriSimpleSlider
       div
      {
        height: 30px !important;
        width: 30px !important;
      }
    </style>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.tasks.query");

      var map;

      function init() {
        var initialExtent = new esri.geometry.Extent({"xmin":-11878390,"ymin":4598298,"xmax":-11455847,"ymax":5052028,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", {
          extent: initialExtent
        });
        var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(tiledMapServiceLayer);

        dojo.connect(map, "onLoad", function(evt) {
          //add a feature layer
        var content = "<b>Name</b>: ${NAME} <br /><b>Population</b>: ${POP2007}";

        var infoTemplate = new esri.InfoTemplate("County Details", content);
        map.infoWindow.resize(225,75);
        var featureLayer = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["NAME","POP2007"],
          infoTemplate: infoTemplate
        });
        featureLayer.setSelectionSymbol(new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([254,216,93,.60])));
        dojo.connect(featureLayer,'onClick',function(evt){
          //select the clicked feature
          var query = new esri.tasks.Query();
          query.geometry = evt.mapPoint;
          featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);

        });
        map.addLayer(featureLayer);
        });
      }

      function orientationChanged() {
        console.log("Orientation changed: " + window.orientation);
        if(map){
          map.reposition();
          map.resize();
        }
      }

      dojo.addOnLoad(init);
    </script>
</head>

<body onorientationchange="orientationChanged();">
    <div id="map" style="width:100%; height:100%;">
    </div>
</body>

</html>