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
Solved! Go to Solution.
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>
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>
Well that's pretty simple! Honestly I don't think there is any reference in the api docs to that being an option anymore. In the constructor section of the Legend Widget there is no reference that I can find. But I am glad it is still there. Thanks Robert! I'll give that a shot.