Exercise 5

UMD JS API Workshop

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>2D Map</title>

<link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.26/"></script>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
  }
</style>

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

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

var view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-75.992824, 42.978188],
      zoom: 7
    });
    
    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"
      })
    );
    
    var waterfalls = new FeatureLayer({
    url: "https://services.arcgis.com/hRUr1F8lE8Jq2uJo/arcgis/rest/services/Waterfalls/FeatureServer/0"
  });
    
    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
  });
    
    var lakes = new FeatureLayer({
    	url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_Water_Bodies/FeatureServer/0"
  	});
    map.addMany([lakes, rivers, waterfalls]);
    
  });
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

Exercise 5 - Style a layer popup

Exercise:

In this lab, you will use code to style a popup.

1. Update the require statement and function definition to add PopupTemplate and the Legend widget.

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

2. Now add a new PopupTemplate to the Waterfalls Feature Layer with the popup template style desired, in this case the Waterfalls layer has a field that contains information to be used in the popup:

var popupTemplate = new PopupTemplate({
title: "{Name}",
content: [{
type: "text",
text: "{PopupInfo}"
}]
});

3. Now add the template to its assigned Feature Layer and add the Feature Layer to the map.

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

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

Challenges:

Add a legend and add it to the UI in your preferred location:

Final Solution