topic Re: build a simple web map in ArcGIS JavaScript Maps SDK Questions

build a simple web map

eyalj — Sun, 14 Nov 2021 10:58:24 GMT

hello

I'm trying to build my first application that uses arcgis maps in react and I'm trying to display a webmap

but when I render the map its looks like im doing something wrong

that's my code:

import React, { useEffect, useRef } from "react" import WebMap from "@arcgis/core/WebMap" import MapView from '@arcgis/core/views/MapView'; function App() { const mapDiv = useRef() useEffect(()=>{ if(mapDiv.current){ const webmap = new WebMap({ portalItem:{ id:"e691172598f04ea8881cd2a4adaa45ba" } }) const view = new MapView({ map: webmap }) view.container= mapDiv.current } },[]) return( <div id ='map' ref={mapDiv} ></div> ) } export default App;

Re: build a simple web map

shaylavi — Sun, 14 Nov 2021 22:54:49 GMT

Have you initialised the API with a token? I suggest you try to follow the basic tutorial from the documentations -

https://developers.arcgis.com/javascript/latest/display-a-map/

Re: build a simple web map

Kishore — Mon, 15 Nov 2021 07:56:44 GMT

@eyalj I don't see any error from your code. I think you are missing the Map div height and width. try following in the return will show you the map:

return ( <div id='map' ref={mapDiv} style={{ height: "100vh", width: "100vh" }} ></div> )

Re: build a simple web map

eyalj — Mon, 15 Nov 2021 13:20:55 GMT

Thanks! @Kishore It works

Re: build a simple web map

eyalj — Mon, 15 Nov 2021 13:22:52 GMT

Thanks! @Kishore It works