Hi there. I'm a beginner in the realms of the javascript API. I'm trying to zoom to the extent of a feature layer I've added to my map. When I try to run the code (attached), I don't get an error but the map extent does not change to the extent of the layer. I've checked out the rest service for my feature layer and verified that it is in the same projection as the base map (3857) and that the extent coordinates are what I expect them to be. I can set up the extent manually to those same coordinates and spatial reference and all works fine, but I'd like to set it dynamically based on the layer. Can anyone point me in the right direction?
<!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>Resource Loader Test</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.8/"></script>
<script>
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/geometry/Extent",
"esri/SpatialReference",
"dojo/ready",
"dojo/parser",
"dojo/on",],
function (Map, FeatureLayer, Extent, SpatialReference, ready, parser, on) {
ready(function () {
parser.parse();
var myLyr = new FeatureLayer("//data.farwestern.com/arcgis/rest/services/base/Environment/MapServer/0", {
mode:FeatureLayer.MODE_ONDEMAND,
autoGeneralize: true,
visible: true,
opacity: 0.5
});
var mapMain = new Map("mapDiv", {
basemap: "streets",
extent: myLyr.fullExtent,
zoom: 5,
});
//var startExtent = new Extent(-13887750, 3371860, -10999990, 6275470, new SpatialReference({ wkid:3857 }))
//mapMain.setExtent(startExtent);
//mapMain.setZoom(5);
mapMain.addLayer(myLyr);
mapMain.on("extent-change", function(printExtent) {
curExtent = mapMain.extent
var extentString = "";
extentString = "XMin: " + Math.round(curExtent.xmin) +
", YMin: " + Math.round(curExtent.ymin) +
", XMax: " + Math.round(curExtent.xmax) +
", YMax: " + Math.round(curExtent.ymax);
dojo.byId("mapInfo").innerHTML = extentString;
});
})
}
)
</script>
</head>
<body class="claro">
<div id="mapDiv" style="width:900px; height:600px;"></div>
<div id="mapInfo"></div>
</body>
</html>
