Exercise 4 - Style Feature Layer

Exercise:

There are many different types of rivers in the Rivers and Streams layer. It would be beneficial to be able to symbolize this layer based on the type of stream.

We will be using the SimpleLineSymbol to style this layer and UniqueValueRenderer to render the style.

1. Update the require statement and function definition to add SimpleLineSymbol and UniqueValueRenderer.

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/symbols/SimpleLineSymbol",
  "esri/renderers/UniqueValueRenderer"
], function(Map, MapView, FeatureLayer, SimpleLineSymbol, UniqueValueRenderer) {

2. Now set up a UniqueValueRenderer based off the Feature field. You can view a list of fields by navigating to the service endpoint.

var view = new MapView({
  container: "viewDiv",
  map: map,
  center: [-75.992824, 42.978188],
  zoom: 7
});

var renderer = new UniqueValueRenderer({
  field: "Feature",
  defaultSymbol: new SimpleLineSymbol()
});

3. Next we will tell the renderer how to respresent each discrete Feature value. We will define the line color/properties for each type of river/stream in the layer.

renderer.addUniqueValueInfo("Stream",
  new SimpleLineSymbol({
    color: "lightblue",
    width: "2px",
    style: "solid"
  })
);
renderer.addUniqueValueInfo("Stream Intermittent",
  new SimpleLineSymbol({
    color: "blue",
    width: "2px",
    style: "dash"
  })
);
renderer.addUniqueValueInfo("Artificial Path",
  new SimpleLineSymbol({
    color: "green",
    width: "2px",
    style: "solid"
  })
);
renderer.addUniqueValueInfo("Canal",
  new SimpleLineSymbol({
    color: "yellow",
    width: "2px",
    style: "solid"
  })
);
renderer.addUniqueValueInfo("Intercoastal Waterway",
  new SimpleLineSymbol({
    color: "gray",
    width: "2px",
    style: "solid"
  })
);
renderer.addUniqueValueInfo("Aqueduct",
  new SimpleLineSymbol({
    color: "blue",
    width: "2px",
    style: "solid"
  })
);

4. Lastly, we will attach the UniqueValueRenderer to the rivers FeatureLayer.

var rivers = new FeatureLayer({
  url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Rivers_and_Streams/FeatureServer/0",
  customParameters: {
    "where": "State='NY'"
  }, renderer: renderer
});

If you're stuck, ensure that your code looks like the solution in the picture below:

Map Solution
Code Solution

Challenges:

-Try out the Symbol Playground to make your own symbols and generate code snippets for your applications!

-Change the color and style of the different types of rivers/streams

-Try investigating and symbolizing other layers as well!

Final Solution