Map center property does not center the map camera within maxbounds

[lachlanwhelan]

The map options center property and the setCamera function do not center map camera correctly. The camera gets positioned at the top or bottom of the boundary instead.

In both scenarios below the map camera is not centered.

MapOptions

const DefaultMap = (props) => {
  const { mapRef, isMapReady } = useAzureMaps();
 const option: IAzureMapOptions = {
  authOptions: {
    authType: AuthenticationType.anonymous,
    clientId: '...',
    getToken: (resolve, reject) => {...},
  },
   maxBounds: props.bounds,
   center: props.center,
};

 return (
   <div style={{width:'700px', height: '300px'}}>
      <AzureMap options={option} />
  </div>
 )
}

export default DefaultMap;

SetCamera

const DefaultMap = (props) => {
 const option: IAzureMapOptions = {
  authOptions: {
    authType: AuthenticationType.anonymous,
    clientId: '...',
    getToken: (resolve, reject) => {...},
  },
};

  useEffect(() => {
   if(mapRef && isMapReady) {
     mapRef.setCamera({
      center: [props.lng, props.lat],
      maxBounds: props.bounds,
    });
   }
  }, [isMapReady, mapRef]);

 return (
   <div style={{width:'700px', height: '300px'}}>
      <AzureMap options={option} />
  </div>
 )
}

export default DefaultMap;

Also tried using atlas.data.BoundingBox.getCenter(bounds) which has the same result.

I have found a work around that involves setting the center value again after initial load but this is not ideal.

Would appreciate any help on this. Thanks in advance.