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}
>
<HeatMapView data={data} />
</Map>
)
}
