How to fixed the size of the map?

311
1
12-14-2021 02:59 AM
altair
by
New Contributor III

Hi all I hope you all doing well, I have a problem regarding of sizes of map, in the first load the size is good and correct and when the data is load the size of the map is changes, please check the image below

first load

altair_0-1639478968752.png

 

after the data finish the load 

altair_1-1639479002666.png

 

 

 

const [getUserData] = useLazyQuery(ME);
const [getLocations] = useLazyQuery(GET_ALL_Star.);
const mapDiv = useRef(style);
let orgId = null;
useEffect(() => {
location();

}, []);

const fetchData = () => {
getUserData()
.then((result) => {
return result.data;
})
.then(({ me }) => {
orgId = organization.id;
return getLocations({
variables: {

paging: {},
},
});
})
.then((result) => {
return result.data;
})
.then(({ location}) => {
displayLocation(location)
});
};

const location = () => {
if (mapDiv.current) {
esriConfig.apiKey = process.env.ARCGIS_API_KEY;
const map = new Map({
basemap: 'arcgis-light-gray',
});

const view = new MapView({
center: [123.5504, 12.3574], // Longitude, latitude
container: mapDiv.current,
map: map,
zoom: 2, // Zoom level
autoResize:true
});
view
.when((r) => {})
.then(() => {
mapDiv.current = view;
fetchData();
});
}
};

const displayLocation = (locations) => {
locations.data = locations.data.filter((l) =>{
return l.geoCode && l.orgId == orgId;
})
const centerLocation = CalculateCenter(locations);
const zoom = CalculateZoomLevel(mapDiv, locations);

mapDiv.current.center = [centerLocation.longitude, centerLocation.latitude];

mapDiv.current.zoom = [zoom];
mapDiv.current.autoResize= false;
locations.data.map((location) => {
const point = new Graphic({
geometry: {
latitude: location.geoCode.latitude,
longitude: location.geoCode.longitude,
type: 'point',
},
symbol: StarPin,
});
mapDiv.current.graphics.add(point);
});
};

return <div className="mapDiv" ref={mapDiv}></div>;

0 Kudos
1 Reply
Bo_King
Occasional Contributor III

Hi Altair

Below are some links to recourses that might answer your map extent questions.

Add data to a project - ArcGIS Pro | Documentation 

Set the map extent - ArcGIS Pro | Documentation 

I am moving this question to the ArcGIS Pro Questions board, so that the broader community might provide additional insight.

 

Regards,

Bo

0 Kudos