Map View is so small

[DRae]

Hi I am new to React and ArcGIS. I tried to write some simple React web application to show the map. However the map is show so small inside the canvas. You can see the below code and attache screenshot

MY Screenshot

Spoiler

const webmap = new Map({

basemap: 'topo-vector'

})

mapRef.current = new MapView({

map: webmap,

container: "mapViewId",

});

viewRef.current = mapRef.current;

const view = viewRef.current;

view.when( () => {

console.log('mapview');

})

}

}, []);

return <div className="mapDiv" id="mapViewId" ></div>;

};

 css

Spoiler

.mapDiv {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

[Brian_Wilson]

Try using

.mapDiv {
  height:400px;
  width:800px;
}

[DRae]

tried and it make is much small on my screen.

[KenBuja]

Normally when looking at the entire world, you're going to see a small map. For example, open this sample and zoom out as far as you can.

Set the MapView's zoom property (or extent) to a more localized view of map and it should fill up the screen.

[JeffreyThompson2 · Accepted solution]

Your map is actually taking up the entire page, but it is very zoomed out. Try specifying a center and a zoom level, something like this:

mapRef.current = new MapView({
   map: webmap,
   container: "mapViewId",
   center: [-118.805, 34.027], // Longitude, latitude
   zoom: 13 // Zoom level
});

 https://developers.arcgis.com/javascript/latest/tutorials/display-a-map/#create-a-map-view

[DRae]

Thank. after changing the zoom level, and it is looking good now.