Set initial extent on page load

[Stuart-Harlan]

Just started using API v5.  Using the arcgis-map component.  Trying to set the initial extent when the page loads through JavaScript.  I've tried so many possibilities I can't remember them all.

I'm using goTo(extent), however, I've tried setting the extent on the view directly and neither seems to work.  The map always zooms to the extent of one of the layers (either the base layers or the map service layer).  NOTE: I have four base layers and one "regular" layer.

If I try to set the extent directly on the view it seems to be ignored.  What I think is happening is, the extent is set, then, overridden by the extent of one of the layers.

If I try to use goTo, I get an exception telling me a goTo is already in progress.

I've tried waiting for various events first to no avail.  I finally just settled on a 2 second delay, then call goTo.  At that time, the previous goTo is finished.  But, I am reasonably assured that this is a bad way of doing it, and, I don't like it.

Is there a preferred way to set the initial extent, in JavaScript, when the page loads initially, using the arcgis-map component?

NOTE: The extent I need is stored in local storage, so, I can't set it on the arcgis-map component in the HTML.  I have to wait until I can run some javascript to get it out of local storage.

Thanks.

[MatthewDriscoll · Accepted solution]

const mapElement = document.getElementById("yourMap");

await mapElement.componentOnReady();

mapElement.center = [-95.38, 39.23];

// Set scale at the view. 
const view = mapElement.view;
view.scale = 560000; 

OR

mapElement.extent = {
  xmin: -95.50,
  ymin: 39.15,
  xmax: -95.20,
  ymax: 39.35,
  spatialReference: { wkid: 4326 }
}

ALSO

const [Extent] = await $arcgis.import([
  "@arcgis/core/geometry/Extent"
]);

const mapElement = document.getElementById("myMap");

await mapElement.componentOnReady();

mapElement.extent = new Extent({
  xmin: -95.50,
  ymin: 39.15,
  xmax: -95.20,
  ymax: 39.35,
  spatialReference: { wkid: 4326 }
});

goTo

await mapElement.goTo({
  xmin: -95.50,
  ymin: 39.15,
  xmax: -95.20,
  ymax: 39.35,
  spatialReference: { wkid: 4326 }
});

OR goTo

const view = mapElement.view;

view.goTo({
  xmin: -95.50,
  ymin: 39.15,
  xmax: -95.20,
  ymax: 39.35,
  spatialReference: { wkid: 4326 }
});

[Stuart-Harlan]

Thanks for the reply.  I finally figured it out.  Turns out I was calling an additional goTo AFTER calling goTo to set my initial extent, which is why the API was telling me a goTo was already in progress.  So...programmer error.  Once I figured that out, it's working fine now.  Thanks for the examples.