topic Map component goTo method troubles in ArcGIS JavaScript Maps SDK Questions

Map component goTo method troubles

MichelleStuart — Fri, 07 Feb 2025 14:40:31 GMT

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>

Re: Map component goTo method troubles

JonathanDawe3 — Fri, 07 Feb 2025 15:29:33 GMT

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

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

Re: Map component goTo method troubles

MichelleStuart — Fri, 07 Feb 2025 15:35:58 GMT

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-reference-map--docs

Re: Map component goTo method troubles

JonathanDawe3 — Fri, 07 Feb 2025 15:50:42 GMT

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 })

Re: Map component goTo method troubles

ReneRubalcava — Fri, 07 Feb 2025 20:35:11 GMT

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

Re: Map component goTo method troubles

MichelleStuart — Mon, 10 Feb 2025 13:33:32 GMT

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.