I'm using ArcGIS Javascript API 4.20 to retrieve a webmap from ArcGIS online, and I'm able to load and display it by providing its ID, using the following simple script:
import MapView from "https://js.arcgis.com/4.20/@arcgis/core/views/MapView.js";
import WebMap from "https://js.arcgis.com/4.20/@arcgis/core/WebMap.js";
import esriId from "https://js.arcgis.com/4.20/@arcgis/core/identity/IdentityManager.js";
var webmap = new WebMap({
portalItem: {
id: "1234567890qwertyuiop"
}
});
var view = new MapView({
map: webmap,
container: "mapFrame", //ID of the HTML element where the map will be displayed
});
I need to find a way to programmatically adjust the map's zoom when it gets loaded, so that every layer/feature contained in it is visible in the area displayed in the map.
I've found examples and references using a "fullExtent" function, but as far as I understand this is designed to work with a layer. I've not been able to figure out how to apply the same idea to the full webmap instead and make it work: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#fullExtent
webmap.when(function(){
view.extent = webmap.fullExtent;
});
//I've tried using this. It doesn't raise any errors, but does nothing.
Could you please let me know what am I doing wrong? Or share any ideas to achieve what I need programmatically using a different approach?
WebMap does not have a fullExtent property, so that is not going to work.
I guess you are trying to have a way to dynamically set the initial extent related to some layers features.
If that is the case you should calculate it using the fullExtent property of the layers involved.
That should not be too hard to pull it, you can do it manually iterating on all the full extents of the layers and getting the minimal and maximal x and y, or use union method of Extent (1).
Another way to think the problem, is to use a fixed area of interest, calculate manually the extent and set it to the view. Or choose a center and play with the zoom levels.