I am stumped on an Web App that I have been working on. I am using Esri JSAPI and can not figure out where I have gone wrong with the Legend. The app runs, but no legend appears anywhere. I have added the all the code I have put together so far. I am looking any suggestions and appreciate all help.
<!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>Pierson</title> <!-- Change title to "Pierson" -->
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<style>
html, body,
#mapDiv {
height: 100%;
margin: 0;
padding: 0;
}
#legendDiv {
position: absolute;
height: 100%;
margin: 0;
padding: 10px;
}
</style>
<script src="https://js.arcgis.com/3.16/"></script>
<script>
require([
"esri/map",
"esri/dijit/Scalebar",
"esri/dijit/Legend",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/dijit/InfoWindowLite",
"esri/InfoTemplate",
"esri/layers/FeatureLayer",
"dojo/dom-construct",
"dojo/domReady!"
], function(
Map,
Scalebar,
Legend,
QueryTask,
Query,
InfoWindowLite,
InfoTemplate,
FeatureLayer,
domConstruct
) {
var map = new Map("mapDiv", {
basemap: "streets",
center: [-105.089706, 39.993596], //Center Map at Lafayette, CO
zoom: 15
});
// Add scalebar to map
var Scalebar = new Scalebar({
map:map,
scalebarUnit: "dual"})
//set query task
queryTask = new QueryTask("http://services.arcgis.com/.../arcgis/rest/services/2016_LafayetteCO2014HouseSales_Pierson/FeatureServer/0");
//set query
query = new Query();
query.returnGeometry = true;
query.outFields = ["BLDG1_DESIGN", "PARCEL_NO", "LOCCITY", "BEDROOMS", "FULL_BATHS", "THREE_QTR_BATHS", "HALF_BATHS", "ABOVE_GROUND_SQFT", "FINISHED_BSMT_SQFT", "SALE_PRICE", "Price_SQFT"]; //Set outfield values for desired attributes
query.where = "BLDG1_DESIGN = '2 - 3 STORY'"; //Set query field to find building designs of "2 - 3 Story" buildings
query.outSpatialReference = {"wkid":102100};
var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));
infoWindow.startup();
map.setInfoWindow(infoWindow);
//Add info to the popup window
var template = new InfoTemplate();
template.setTitle("Parcel Number: ${PARCEL_NO}"); //Set info window title to the Parcel Number
template.setContent("<b>Bedrooms: </b>${BEDROOMS}<br/>" + //Set info display to Bedrooms
"<b>Full Baths: </b>${FULL_BATHS}<br/>" + //Set info display to Full Baths
"<b>Three Quarter Baths: </b>${THREE_QTR_BATHS}<br/>" + //Set info display to 3/4 Baths
"<b>Half Baths: </b>${HALF_BATHS}<br/>" + //Set info display to 1/2 Baths
"<b>Above Ground Square Footage: </b>${ABOVE_GROUND_SQFT} sqft <br/>" + //Set info display to ABOVE_GROUND_SQFT
"<b>Finished Basement Square Footage: </b>${FINISHED_BSMT_SQFT} sqft <br/>" + //Set info display to FINISHED_BSMT_SQFT
"<b>Sale Price: $ </b>${SALE_PRICE}<br/>" + //Set info display to Sale Price
"<b>Price per Square Foot: $ </b>${Price_SQFT}<br/>"); //Set info display to Price per square foot
//add a layer to the map
var featureLayer = new FeatureLayer("http://services.arcgis.com/.../arcgis/rest/services/2016_LafayetteCO2014HouseSales_Pierson/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate:template,
outFields: ["BLDG1_DESIGN", "PARCEL_NO", "LOCCITY", "BEDROOMS", "FULL_BATHS", "THREE_QTR_BATHS", "HALF_BATHS", "ABOVE_GROUND_SQFT", "FINISHED_BSMT_SQFT", "SALE_PRICE", "Price_SQFT"]
});
map.addLayer(featureLayer);
map.infoWindow.resize(325, 175);
//Add legend
var legend = new Legend({
map: map,
layerinfos:[{
layer: featureLayer,
}]
}, "legendDiv");
legend.startup;
});
</script>
</head>
<body>
<div id="mapDiv"></div>
<div id="legendDiv"></div>
</body>
</html>
