<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Intro to FeatureLayer | Sample | ArcGIS Maps SDK for JavaScript 4.33</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.33/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.33/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
ul {
display: flex;
flex-direction: column;
gap: 5px;
}
</style>
<script type="module">
const [Map, MapView, FeatureLayer,Legend] = await $arcgis.import([
"@arcgis/core/Map.js",
"@arcgis/core/views/MapView.js",
"@arcgis/core/layers/FeatureLayer.js",
"@arcgis/core/widgets/Legend.js",
]);
const map = new Map({
basemap: "hybrid",
});
const view = new MapView({
container: "viewDiv",
map: map,
center:[-73.935242,40.730610],
zoom:10
});
const featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NY%20Educational%20Attainment/Feat...",
});
map.add(featureLayer);
view.when(()=>{
//#region Default Legend
featureLayer.when(() => {
console.log(featureLayer);
var divCustomLegend=document.getElementById("divCustomLegend");
const lebel=document.createElement("label");
lebel.textContent="NY Educational Attainment";
divCustomLegend.appendChild(lebel);
const ul=document.createElement("ul");
ul.style.listStyleType = 'none';
featureLayer.renderer.uniqueValueInfos.forEach(item=>{
const li=document.createElement("li");
const canvas = document.createElement("canvas");
canvas.width=20;
canvas.height=20;
canvas.style.backgroundColor=item.symbol.color;
li.appendChild(canvas);
const lebel2=document.createElement("label");
lebel2.textContent=item.value;
li.appendChild(lebel2);
ul.appendChild(li);
});
divCustomLegend.appendChild(ul);
view.ui.add(divCustomLegend, "top-right");
});
//#endregion
//#region Default Legend
const legend = new Legend({
view: view,
layerInfos: [
{
layer: featureLayer,
title: "NY Educational Attainment",
},
],
});
view.ui.add(legend, "bottom-left");
//#endregion
});
</script>
</head>
<body>
<div id="viewDiv">
<div id="divCustomLegend" style="background-color: white;max-height: 250px;max-width: 200px;overflow-y: auto;">
</div>
</div>
</body>
</html>
