Azure Maps - Max Bounds Issue with Pitch and Rotate Button Controls

Question

When using React Azure Maps, max bounds have been set to restrict users from panning and zooming outside the designated area, which works as intended. However, after using the pitch or rotate buttons, it becomes possible to pan and zoom beyond the max bounds, while right-click pitching or rotating maintains the max bounds or adjusts it based on the initial ratio.

Observations

1. The button pitch and rotate controls break the max bounds, allowing users to pan and zoom outside of it.
2. Mouse pitch and rotate adjustments respect the max bounds while maintaining the initial ratio.

Questions

1. Is this behaviour a bug or is there something that has been overlooked?
2. Is there a way to replicate the same behaviour achieved with mouse pitch and rotate using the button controls?
3. How can the max bounds be completely restricted?

Steps to Reproduce

1. Create a new React App. I used Vite.
2. Run npm install react-azure-maps
3. Refer to below code snippet.

import { 
AuthenticationType,
AzureMap, 
AzureMapsProvider, 
ControlOptions, 
IAzureMapOptions } from "react-azure-maps"
import 'azure-maps-control/dist/atlas.min.css';

const MyAzureMap = () => {

  const AzureMapOptions: IAzureMapOptions = {
    authOptions: {
      authType: AuthenticationType.subscriptionKey,
      subscriptionKey: "Your Subscription Key",
    },
    maxBounds: [92.68546328986241, -43.94432636752852, 184.5190468863849, -9.616818382665386]
  }


  return (
   <>
     <AzureMap options={AzureMapOptions} controls={[
      {
        controlName: 'StyleControl',
        controlOptions: { mapStyles: 'all' },
        options: { position: 'top-right' } as ControlOptions,
      },
      {
        controlName: 'ZoomControl',
        options: { position: 'top-right' } as ControlOptions,
      },
      {
        controlName: 'CompassControl',
        controlOptions: {  style: 'dark' },
        options: { position: 'top-right' } as ControlOptions,
      },
      {
        controlName: 'PitchControl',
        controlOptions: {  style: 'dark' },
        options: { position: 'top-right' } as ControlOptions,
      },
      {
        controlName: 'ScaleControl',
        options: { position: 'bottom-left' } as ControlOptions,
      },
      {
        controlName: 'FullscreenControl',
        options: { position: 'top-right' } as ControlOptions,
      },
    ]}></AzureMap>
   </>
  )
}

function App() {

  return (
    <>
     <div style={{width: '1400px', height: '600px'}}>
      <AzureMapsProvider>
       <MyAzureMap/>
      </AzureMapsProvider>
     </div>
    </>
  )
}

export default App

Answer 1

I just tested this with the following sample: https://samples.azuremaps.com/?search=bounds&sample=limit-map-view-with-maxbounds It behaves as expected. When pitched/rotated it is possible to see some area outside of the max bounds, but it isn't possible to get the center of the map to go beyond the bounding box. Try this sample and see if this is the same behavior you are seeing. If it is, then that is how it was designed to work. If you are seeing something different, then the issue is specific to the react map control.

Answer 2

Hi Whelan, Lachlan

We have noticed that you rated an answer as not helpful. We appreciate your feedback and are committed to improving your experience with the Q&A.

But please understand that we are trying to improve the product based on customer feedback.

We have provided work around on "listening to rotate/pitch events to zoom back to original size if they are crossing the max bounds" with an acknowledgement from rbrundritt acknowledging this bug and fixing in next updates.

Question: Max Bounds not being broken with Pitch and Rotate Button Controls

Answer: Suggested to embed listener for pitch and rotate events to zoom map to original size. Rbrundritt acknowledged issue and looking forward for the fix in future release.

If I missed anything please let me know and I'd be happy to add it to this answer, or feel free to comment below with any additional information.

If you have any other questions, please let me know. Thank you again for your time and patience throughout this issue.

Please don’t forget to Accept Answer and Yes for "was this answer helpful" wherever the information provided helps you, this can be beneficial to other community members.

Thank You.