Matthew,
Here is a sample for that:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>FeatureLayer On Demand</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.27/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
<style>
html, body, #mapDiv {
padding:0;
margin:0;
height:100%;
}
#legendDiv {
position:absolute !important;
right:20px;
top:10px;
z-Index:999;
width: 200px;
height: 200px;
background-color: white;
padding:8px;
}
</style>
<script src="https://js.arcgis.com/3.27/"></script>
<script>
var map;
require([
"esri/map", "esri/InfoTemplate", "esri/layers/FeatureLayer", "esri/dijit/Legend", "dojo/_base/array",
"dojo/parser", "dojo/domReady!"
], function(
Map, InfoTemplate, FeatureLayer, Legend, arrayUtils,
parser
) {
parser.parse();
map = new Map("mapDiv", {
basemap: "national-geographic",
center: [-96.541, 38.34],
zoom: 6
});
map.on("load", initOperationalLayer);
function initOperationalLayer() {
var infoTemplate = new InfoTemplate("${state_name}", "Population (2000): ${pop2000:NumberFormat}");
var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: infoTemplate
});
map.addLayers([featureLayer]);
map.infoWindow.resize(155,75);
map.on("layers-add-result", function (evt) {
var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
return {layer:layer.layer, title:layer.layer.name};
});
if (layerInfo.length > 0) {
var legendDijit = new Legend({
map: map,
layerInfos: layerInfo
}, "legendDiv");
legendDijit.startup();
}
});
}
});
</script>
</head>
<body class="claro">
<div id="mapDiv">
<div id="legendDiv"></div>
</div>
</body>
</html>