Render Legend Widget outside MapView?

Question

Is there a way to render the Legend widget outside of the mapview in the 4.x api? For instance in the 3.x api I was able to place the legend in  a modal because you had more control over where it was placed in the dom. But it seems here I can only add it to the map view via the ui.add() method. Any help would be greatly appreciated.

Thanks,

Isaiah Aguilera

rscheitlin · Accepted Answer

Isaiah, Sure you can place it where you want: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Legend widget - 4.6</title> <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css"> <style> html, body{ padding: 0; margin: 0; height: 100%; width: 100%; overflow: hidden; } #viewDiv { padding: 0; margin: 0; height: 100%; width: calc(100% - 205px); overflow: hidden; } #legendDiv { padding: 0; margin: 0; position: absolute; top: 0; right: 0; z-index: 500; } </style> <script src="https://js.arcgis.com/4.6/"></script> <script> require([ "esri/views/MapView", "esri/widgets/Legend", "esri/WebMap", "dojo/domReady!" ], function( MapView, Legend, WebMap ) { var webmap = new WebMap({ portalItem: { // autocasts as new PortalItem() id: "4abe6a830b8f466dacf8abfde567a781" } }); var view = new MapView({ container: "viewDiv", map: webmap }); view.when(function() { // get the first layer in the collection of operational layers in the WebMap // when the resources in the MapView have loaded. var featureLayer = webmap.layers.getItemAt(0); var legend = new Legend({ view: view, layerInfos: [{ layer: featureLayer, title: "NY Educational Attainment" }] }, "legendDiv"); // Add widget to the bottom right corner of the view //view.ui.add(legend, "bottom-right"); }); }); </script> </head> <body class="calcite"> <div id="viewDiv"></div> <div id="legendDiv"></div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍