Map gets stuck on loading when navigated back from another screen

50
0
01-20-2022 05:23 AM
VaniShrivastava
New Contributor

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>
    )
}
0 Kudos
0 Replies