AnsweredAssumed Answered

Hi Frnds, iam new to arcgis,Iam trying to Set Layer Legend to my API map, But Somehow it showing no legend, can you please check the code and let me know where i did wrong

Question asked by ankitreddy2016 on Jan 10, 2020

<!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.14</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
/>

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>

<script src="https://js.arcgis.com/4.14/"></script>
<script>
require([
"esri/Map",
"esri/WebScene",
"esri/views/SceneView",
"esri/Camera",
"esri/layers/FeatureLayer",
"esri/renderers/UniqueValueRenderer",
"esri/symbols/ExtrudeSymbol3DLayer",
"esri/geometry/geometryEngine",
"esri/widgets/Slider",
"esri/widgets/Legend",
"esri/widgets/Expand",
"esri/views/ui/DefaultUI"
], function(
Map,
WebScene,
SceneView,
Camera,
FeatureLayer,
UniqueValueRenderer,
ExtrudeSymbol3DLayer,
geometryEngine,
Slider,
Legend,
Expand,
DefaultUI
) {
var map = new Map({
basemap: "topo-vector"
});

const view = new SceneView({
map: map,
zoom: 16.5,
center: [103.809, 1.279],
container: "viewDiv",
qualityProfile: "high",
environment: {
lighting: {
directShadowsEnabled: true,
ambientOcclusionEnabled: true
},
atmosphere: {
quality: "high"
}
}
});

var SolarPanelRenderer = {
type: "simple", // autocasts as new UniqueValueRenderer()
symbol: {
type: "polygon-3d", // autocasts as new PolygonSymbol3D()
symbolLayers: [
{
type: "extrude", // autocasts as new ExtrudeSymbol3DLayer()
size: 1,

// autocasts as new ExtrudeSymbol3DLayer()
material: {
color: "#F0F8FF",
profile:"round"
},

edges:{

type: "solid",
color: "#000000",


}
}
]
}
};

const SolarPanelLayer = new FeatureLayer({

url:
"https://services6.arcgis.com/drFaxsYR91JoOHAb/arcgis/rest/services/SolarPanel/FeatureServer/0",

elevationInfo: {
mode: "relative-to-ground",
offset: 10
},
title: "SolarPanel",
outFields: ["*"],
renderer:SolarPanelRenderer,
//popupTemplate:template_SolarPanel
});
map.add(SolarPanelLayer);

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 = map.layers.getItemAt(0);

var legend = new Legend({
view: view,
layerInfos: [
{
layer: FeatureLayer,
title: "Legend"
}
]
});

// Add widget to the bottom right corner of the view
view.ui.add(legend, "bottom-right");

});

});
</script>
</head>

<body>
<div id="viewDiv"></div>
<div id="Legend"></div>
</body>
</html>

Outcomes