build a simple web map

[eyalj]

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;

[shaylavi]

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/

[Kishore · Accepted solution]

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

[eyalj]

Thanks! @Kishore It works

[eyalj]

Thanks! @Kishore It works