nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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>

Trouver plus de publications taguées avec

Accepted answers

JonathanDawe3

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

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

All comments

RRubalcava

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

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

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

JonathanDawe3

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

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

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.