Map component goTo method troubles

[MichelleStuart]

Hi,

I am using the Map Component in a Vite-React-Typescript app.  I would like to change the zoom level when the user changes visible layers.  However, I get Error: map.goTo is not a function.  How do I use the beloved goTo with the new Map Component?  Also, I would love to provide a center to the goTo but I can't seem to find any spatial information when I log the map and look at the json.  I just want to zoom in or out on the current center.

const [map, setMap] = useState(null)

  useEffect(() => {
    if (map) {
      if (zoom) {
        console.log('checking zoom', zoom, map)
        map.goTo({ zoom })
      } else if (Object.keys(extent).length > 0) {
        map.extent = extent
      }

    }
      
  }, [map, extent, zoom])
...
<ArcgisMap
  basemap={'gray-vector'}
  extent={extent}
  popup={{ dockEnabled: true,
    dockOptions: {
      position: "top-right",
      breakpoint: false
    }} as any}
  onArcgisViewReadyChange={(event: any) => {
    setMap(event.target.map)
  }}
  ></ArcgisMap>

[JonathanDawe3 · Accepted solution]

you need to access the view not the map in the callback:

onarcgisViewReadyChange={(event) => {
  console.debug('onArcgisViewReadyChange', event.target.view);
}}

[MichelleStuart]

Thank you Jonathan!

Where do you find this stuff out?  I did not see it in the docs  to demo at https://developers.arcgis.com/javascript/latest/references/map-components/?path=/docs/component-refe...

[JonathanDawe3]

It was a bit through trial and error to be honest - I agree the documentation is sparse for linking between the map components library and the ArcGIS JS API. 

I consoled out the event.target, and then just recognised which bit was the MapView. Once I had that I just used the ArcGIS JS docs: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html

In terms of your question regarding the goto function, you should be able to set a center and zoom. 

view.goTo({
  center: [-126, 49],
  zoom: 10
})

[ReneRubalcava]

There's a goTo method on the map component. You can use a useRef to access the component and it's methods.

[MichelleStuart]

Thank you so much for your reply, Rene.  I didn't realize I could access the view from the event because all the examples I found online only used the `event.target.map`.  Hopefully, the demo in the docs will be updated soon to show the key uses that will help us transition to components.