We have more than one feature layer to deal with. Let's try to build a layer dictionary. In the following code snippet, we will try to create an array of objects where each object has properties such as a URL and title. The URL refers to the URL of a feature layer and the title property refers to the title by which we would like to refer to the feature layer:

var windDataURL = "http://livefeeds.arcgis.com/arcgis/rest/services/LiveFeeds/NOAA_METAR_current_wind_speed_direction/MapServer";

var activeHurricaneURL = "http://livefeeds.arcgis.com/arcgis/rest/services/LiveFeeds/Hurricane_Active/MapServer";


var layerDict = [
          {
            title: "Forecast Error Cone",
            URL: activeHurricaneURL + "/4"
          },
          {
            title: "Forecast Tracks",
            URL: activeHurricaneURL + "/2"
          },
          {
            title: "Observed Track",
            URL: activeHurricaneURL + "/3"
          },
          {
            title: "Watches and Warnings",
            URL: activeHurricaneURL + "/5"
          },
          {
            title: "Forecast Positions",
            URL: activeHurricaneURL + "/0"
          },
          {
            title: "Past Positions",
            URL: activeHurricaneURL + "/1"
          },
          {
            title: "Wind Data",
            URL: windDataURL + "/0"
          }
        ];

This helps us retrieve the feature layer using the layer name or title property. Let's use the array.map() method provided by the dojo/_base/array module to add the corresponding feature layer for each object into the layerDict array. The array.map() method, if you can recollect from Chapter 1, Foundation for the API, actually iterates through the elements in the array and will return an array. Then, each item being iterated can be modified. In our case we are trying to do the following for each item:

The following code snippet explains the process:

var layerDict = array.map(layerDict, function (item) {
          var featLayer = new FeatureLayer(item.URL, {
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"]
              //infoTemplate: infoTemplate
          });
          map.addLayer(featLayer);
          item.layer = featLayer;
          return item;
        });

Now each object in the layerDict array will have an additional layer property, which holds the feature layer referred by the URL.

To retrieve a feature layer, we can use the layer name in the array.filter() method provided by the dojo/_base/array module. The filter method() iterates through each object item and returns a filtered array based on our predicate condition.

The following line of code returns the feature layer with the title "Forecast Error Cone" and saves it in the variable named foreCastErrorConeFeatureLayer:

var foreCastErrorConeFeatureLayer = array.filter(layerDict, function (item) 
{
  return item.title == "Forecast Error Cone";
})[0].layer;

We are trying to symbolize the features in some of the feature layers. We will start off with the past positions. The past positions feature a layer, which by default is represented by a circle with a dot in the center. We will try to use a red flag to symbolize it. The following approach shall be taken to symbolize it:

The following lines of code explain this process clearly:

var pastPositionLayer = array.filter(layerDict, function (item) {
    return item.title == "Past Positions";
})[0].layer;

var pastPositionSymbol = new PictureMarkerSymbol({
  "angle": 0,
  "type": "esriPMS",
  "url": http://static.arcgis.com/images/Symbols/Basic/RedFlag.png",
  "contentType": "image/png",
  "width": 18,
  "height": 18
});

var pastPositionRenderer = new SimpleRenderer(pastPositionSymbol);
pastPositionLayer.setRenderer(pastPositionRenderer);

Now, we can try and render the forecast error cones layer. Forecast error cones are polygon feature layers that represent the uncertainty in the forecast predictions. Two polygon features are present for each hurricane type. One of the polygon represents a 72-hour forecast error polygon and the other represents a 120-hour forecast error polygon. This information is available in the FCSTPRD field in the feature layer.

Let's create a unique value renderer and symbolize each of these types of polygon differently based on the value of the FCSTPRD field name. To create a unique value renderer, we need to take the following approach:

We have tried symbolizing a feature layer with PictureMarkerSymbol and render it using SimpleRenderer. For another feature layer, we used a unique value renderer to render features having different values for a particular field differently. Now let's try a special kind of symbology known as CartographicLineSymbol.

The CartographicLineSymbol provides additional properties such as cap and join, which defines how the end cap of the lines and the edge joins are rendered. To know more about these two properties, visit the API page at https://developers.arcgis.com/javascript/jsapi/cartographiclinesymbol-amd.html.

We would like to use the CartographicLineSymbol to symbolize the forecast track feature layer. The following shows us how to use the symbol and to render the particular feature layer:

The following snippet codifies the previous approach:

var lineSymbol = new CartographicLineSymbol(
  CartographicLineSymbol.STYLE_DASHDOT,
  new Color([255, 255, 0]), 5,
  CartographicLineSymbol.CAP_ROUND,
  CartographicLineSymbol.JOIN_MITER, 5
);
var CartoLineRenderer = new SimpleRenderer(lineSymbol);

forecastTrackLayer.setRenderer(CartoLineRenderer);

Our map looks like the following when the previous renderers are applied to the past positions layer, Forecast Track, and the Forecast Error Cone layers: