build a simple web map

376
4
Jump to solution
11-14-2021 02:39 AM
eyalj
by
New Contributor II

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;

 

 

 

 

 

 

 

 

0 Kudos
1 Solution

Accepted Solutions
Kishore
Occasional Contributor

@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>
  )
Regards,
Kishore

View solution in original post

0 Kudos
4 Replies
shaylavi
Esri Contributor

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/

 

Shay
0 Kudos
Kishore
Occasional Contributor

@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>
  )
Regards,
Kishore
0 Kudos
eyalj
by
New Contributor II

Thanks! @Kishore It works

0 Kudos
eyalj
by
New Contributor II

Thanks! @Kishore It works

0 Kudos