What's the right way to get all the coordinates to set the maxBounds?

[eduardomarr]

What's the right way to get all the coordinates to set the maxBounds?

I do this and it doesn't work:

if my restrict area is some like that..

What I usually do is, take the map and go a little further down and get the longitude and latitude data to use on "Southwest coordinates" array.

I do the same on North:

my property would look like this:

 maxBounds={[
        [-45.0873499, -23.4478651], // Southwest coordinates
        [-45.0869838, -23.4271727] // Northeast coordinates
      ]}

if i use all of this coordinates in my component, this will bw the result:

 return (
    <Map
      {...viewport}
      initialViewState={{
        longitude: -45.0870243,
        latitude: -23.4370723,
      }}
      maxBounds={[
        [-45.0873499, -23.4478651], // Southwest coordinates
        [-45.0869838, -23.4271727] // Northeast coordinates
      ]}
      style={{ width: '60vw', height: '60vh' }}
      mapboxAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      mapStyle={process.env.REACT_APP_MAPBOX_STYLE}
      onMove={onViewportChange}
    />
  );

Someone could help me?

[saintsalad]

@eduardomarr Do you solved this?

[joel-daros]

The coordinates inside bound needs to follow this format:

  [
    [boundsObject.ne.lon, boundsObject.ne.lat],
    [boundsObject.sw.lon, boundsObject.sw.lat],
  ];

[saintsalad]

I tried this
const maxBounds = [ [121.7829649716893, 17.04453545413898], [122.2914574628461, 16.636550701667574] ]
and this
const maxBounds = [ { lon: 121.7829649716893, lat: 17.04453545413898 }, { lon: 122.2914574628461, lat: 16.636550701667574 } ]

but I got this error, I am very confuse with this 🥲

Uncaught Error: Invalid LngLat object: (NaN, NaN)

[saintsalad]

Can you please provide a good example?

[joel-daros]

// Set bounds to San Francisco, California.
const bounds = [
[-122.66336, 37.492987], // Southwest coordinates
[-122.250481, 37.871651] // Northeast coordinates
];

Check a working example here: https://docs.mapbox.com/mapbox-gl-js/example/restrict-bounds/