feat: add legend

Author: stdavis

src/App.js

@@ -17,7 +17,7 @@ function App() {
     const initMap = async () => {
       console.log('initMap');
 
-      const { esriConfig, MapView, WebMap } = await getModules();
+      const { esriConfig, MapView, WebMap, Legend } = await getModules();
 
       esriConfig.portalUrl = 'https://maps.publiclands.utah.gov/portal';
 
@@ -33,9 +33,15 @@ function App() {
         popup: null
       });
 
+      const legend = new Legend({
+        view,
+        container: document.createElement('div')
+      });
+      view.ui.add(legend, { position: 'bottom-right' });
+
       await view.when();
 
-      featureLayer.current = view.map.layers.find(layer => layer.title === 'RS2477_Centerline_Secure - RS2477 Centerline');
+      featureLayer.current = view.map.layers.find(layer => layer.title === 'RS2477 Centerlines');
       const layerView = await view.whenLayerView(featureLayer.current);
 
       const table = view.map.tables[0];

src/App.scss

@@ -14,5 +14,8 @@ html, body, #root, .app {
   }
   .esri-view {
     flex: 1;
+    .esri-widget {
+      background-color: #ffffffb0;
+    }
   }
 }

src/esriModules.js

@@ -8,7 +8,8 @@ export default async () => {
     'esri/views/MapView',
     'esri/widgets/Feature',
     'esri/tasks/QueryTask',
-    'esri/Graphic'
+    'esri/Graphic',
+    'esri/widgets/Legend'
   ];
 
   const [
@@ -17,7 +18,8 @@ export default async () => {
     MapView,
     Feature,
     QueryTask,
-    Graphic
+    Graphic,
+    Legend
   ] = await loadModules(requires, { version: '4.16', css: true });
 
   return {
@@ -26,6 +28,7 @@ export default async () => {
     MapView,
     Feature,
     QueryTask,
-    Graphic
+    Graphic,
+    Legend
   };
 }