Map gets stuck on loading when navigated back from another screen

VaniShrivastava — Thu, 20 Jan 2022 13:23:07 GMT

Hi,

I have used react-npm library to build a map in my react application. It works perfectly fine on the very first load. But when the user navigates to another page in the app, performs some actions on that page and then lands back on the map, the map gets stuck on the loading screen and never loads.

Here is my react component:

setDefaultOptions({ css: true })

const handleOnLoad = useCallback(

(_, view: __esri.MapView | __esri.SceneView) => {

let zoom: any

loadModules(['esri/widgets/Zoom'])

.then(([Zoom]) => {

zoom = new Zoom({

view: view,

})

view.ui.add(zoom, {

position: 'top-left',

})

.catch((err) => console.error(err))

return () => {

view.ui.remove(zoom)

}

[],

)

return (

<Map

viewProperties={{

ui: {

components: [],

popup: {

autoCloseEnabled: true,

zoom: 6,

}}

mapProperties={{

basemap: 'streets-vector',

}}

onLoad={handleOnLoad}

</Map>

)

}

topic Map gets stuck on loading when navigated back from another screen in ArcGIS JavaScript Maps SDK Questions

Map gets stuck on loading when navigated back from another screen