I created a map and a layer. I would like to zoom to the layer's extent as soon as MapView loaded.
I found this reference from the API https://totalapis.github.io/api-reference/esri-layers-FeatureLayer.html#fullExtent
but could not work it out. Do you have any idea?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title> ArcGIS API for JavaScript Tutorials: Add a feature layer</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], function(esriConfig,Map,MapView,FeatureLayer)
{
esriConfig.apiKey = "MyAPIKey";
const map = new Map({
basemap: "arcgis-topographic"
});
var view = new MapView({
map: map, // References a Map instance
container: "viewDiv" // References the ID of a DOM element
});
//data needs to be public to access them without authorization
var fl = new FeatureLayer({
url: url });
map.add(fl); // adds the layer to the map
view.extent = fl.fullExtent; //this doesn't work
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Solved! Go to Solution.
Is this what you are looking for?
https://codepen.io/odoe/pen/MWmdNOY?editors=0010
Issue with snippet you have is the layer has not loaded, so the full extent is not known yet. If you wait for view.when(), the layer will be loaded and the fullExtent will be available.
Is this what you are looking for?
https://codepen.io/odoe/pen/MWmdNOY?editors=0010
Issue with snippet you have is the layer has not loaded, so the full extent is not known yet. If you wait for view.when(), the layer will be loaded and the fullExtent will be available.
Awesome! it works now. I tried
view.then(setExtent(layer))
previously but did not work. Do you know the difference between .then and .when?
view.when() is the preferred async method. view.then() was deprecated some time ago when the Promise spec was finalized and we had to make some changes in the API.