UMD JS API Workshop
Exercise 3 - Add a Feature Layer

Exercise:

In this lab, you will add a feature layer to an ArcGIS API for JavaScript application.

-Explore the FeatureLayer Class and its corresponding properties

-Explore the Map Class and its corresponding properties


1. Update the require statement and function definition:



 require([
   "esri/Map",
   "esri/views/MapView",
   /*** ADD ***/
   "esri/layers/FeatureLayer"
 ], function(Map, MapView, FeatureLayer) {



2. Now add the waterfalls layer to the map by assigning the REST endpoint url of the layer.

Add the following to the end of the script element.

 var waterfalls = new FeatureLayer({
   url: "https://services.arcgis.com/hRUr1F8lE8Jq2uJo/arcgis/rest/services/Waterfalls/FeatureServer/0"
 });

 map.add(waterfalls);



Finally, click refresh and navigate to the map to confirm that the output shows a map with waterfall locations.


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




Challenge:

-Add the USA Rivers and Streams layer to the map (stretch challenge: limit the view to only rivers and streams in New York), and then add the Water Bodies layer. You will have to zoom in a bit for this layer to show.

-Ensure the layers are ordered with polygons on the bottom, lines and then points at the top.

-If you added additional layers using the add() method, try the addMany() method instead. Read up on the layers collection and see how the API gives you a few ways to add layers to a map.

map.addMany([lakes, rivers, waterfalls]);



-The 4.x JS API works closely with ArcGIS Portals. Instead of the Feature Service URL, use the Portal Item ID to add layers. See the URLs of the Portal Items for Waterfalls, Rivers and Lakes to get their IDs. What functionality do you gain in the app automatically when using the Portal Id's vs adding the feature layer using the url?

Final Solution