How to fixed the size of the map?

altair — Tue, 14 Dec 2021 11:21:16 GMT

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

after the data finish the load

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

Re: How to fixed the size of the map?

CourtneyMenikheim — Wed, 15 Dec 2021 14:50:00 GMT

Looking at the two images, you can see star pins in areas of the map that aren't visible on the first map. When you run the following code snippet, you are telling the map to resize.

const zoom = CalculateZoomLevel(mapDiv, locations); mapDiv.current.center = [centerLocation.longitude, centerLocation.latitude]; mapDiv.current.zoom = [zoom];

Without seeing everything in CalculateZoomLevel, it's hard to identify specifics, but I suspect the method is getting the extent of all the features and using that in part of the calculation.

topic Re: How to fixed the size of the map? in ArcGIS JavaScript Maps SDK Questions

How to fixed the size of the map?

Re: How to fixed the size of the map?