Here is my code:
<!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>Map and Layer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
}
#info {
position: absolute;
right: 0;
top: 0;
padding: 10px;
background-color: #999;
font: 14px Segoe UI;
width: 200px;
text-align: center;
border-radius: 0 0 0 10px;
}
</style>
<script src="https://js.arcgis.com/3.15/"></script>
<script>
var map, calculateAcreage;
require([
"esri/map", "esri/layers/FeatureLayer", "esri/InfoTemplate",
"esri/dijit/Legend",
"esri/Color", "dojo/number", "dojo/domReady!"
], function(
Map, FeatureLayer, InfoTemplate,
Legend,
Color, number
) {
map = new Map("map", {
basemap: "gray",
center: [-97.144, 34.174],
zoom: 6
});
map.on("layers-add-result", createLegend);
var infoTemplate = new InfoTemplate(
"${Name},
"${SHAPE.STArea()} sq.ft is equivalent to ${SHAPE.STArea():calculateAcreage} acres."
);
var layer = new FeatureLayer("http://url", {
infoTemplate: infoTemplate,
outFields: ["*"],
opacity: 0.5
});
// convert squarefeet to acre
calculateAcreage = function(value) {
var squarefeet = (value.hasOwnProperty("attributes")) ? value.attributes.SHAPE.STArea() : value;
return number.format(squarefeet / 43560, { places: 2 });
};
map.addLayers([layer]);
function createLegend(results) {
var legend = new Legend({
layerInfos: [{
layer: results.layers[0].layer,
title: " "
}],
map: map
}, "legend");
legend.startup();
}
});
</script>
</head>
<body>
<div id="map"></div>
<div id="info">
<div style="font-size: 36px;">Acreage of Cooperator Land.</div>
<div id="legend"></div>
</div>
</body>
</html>
