topic Map View is so small in ArcGIS JavaScript Maps SDK Questions

Map View is so small

DRae — Wed, 15 Nov 2023 19:40:16 GMT

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

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

.mapDiv {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

Re: Map View is so small

Brian_Wilson — Wed, 15 Nov 2023 19:46:29 GMT

Try using

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

Re: Map View is so small

DRae — Wed, 15 Nov 2023 19:55:20 GMT

tried and it make is much small on my screen.

Re: Map View is so small

KenBuja — Wed, 15 Nov 2023 20:06:41 GMT

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.

Re: Map View is so small

JeffreyThompson2 — Wed, 15 Nov 2023 20:05:23 GMT

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

Re: Map View is so small

DRae — Wed, 15 Nov 2023 20:08:07 GMT

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