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%;

}

 

Jeff.Thompson@arlingtontx.gov_arlingtontx

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