Map components Search zoom scale?

[JaredPilbeam2]

I don't see a way to control the zoom? I don't see a property to do so. This has no effect:

<arcgis-search position="top-left" zoom="10"></arcgis-search>

[Sage_Wall]

Hi @JaredPilbeam2 ,

The zoomScale is set in the zoom components sources property

<arcgis-search id="search" position="top-right"></arcgis-search>

<script type="module">
  const searchElement = document.getElementById("search");
  searchElement.addEventListener("arcgisReady", () => {
    searchElement.sources = [
      {
        url:
        "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer",
        name: "LocatorSearchSource",
        zoomScale: 1000000
      }
    ];
  });
</script>

[JaredPilbeam2]

Thanks for the reply. That doesn't seem to have any effect on the zoom either? And it's asking me to sign in. Does it need a token? Sample.

[Sage_Wall]

Yeah i think that service does require a token or to sign in, I just copied it from the doc and didn't try and run it.  I see a few layerview creation errors in your codepen, but I don't think that would affect the search.  I'm not sure what's going on I'll have to look into it more closely

[Noah-Sager]

Hi @JaredPilbeam2, you may need to use the widget property to do that currently. We're in a transition process with components and widgets. I believe you want the goToOverride property, 

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html#goToOverride

[JaredPilbeam2]

Hi @Noah-Sager, yes I am aware of the transition. My goal here is just that. I'm creating an app using components, not widgets, to get a leg-up on my functioning custom apps that will need transitioning.

[ReneRubalcava · Accepted solution]

You can do this by listening for the sources collection to change.

https://codepen.io/odoe/pen/gbOqrXv?editors=1000

const searchElement = document.querySelector("arcgis-search");
// component loaded, might still be loading data
await searchElement.componentOnReady();

searchElement.allSources.on("change", () => {
  searchElement.allSources.forEach((source) => {
    source.zoomScale = 100000;
  });
});