React-native-mapbox-gl: Add setMaxBounds

[JClackett]

Would appreciate this feature within the react native wrapper

[nitaliano]

This is possible to do using https://github.com/mapbox/geo-viewport#viewportbounds-dimensions-minzoom-maxzoom-tilesize if you have the bounds you want to set and the width and height of the map that function will return a center point and zoom level. You can then set that zoom level as the minZoomLevel on the map

[nitaliano]

We'll look into adding this to the repo

[ahmetilhann]

Do you have any samples to share? @nitaliano

[erick-otenyo]

Hello.. Was this feature added ?

[abegehr]

bump, will this be added?

[maxammann]

To be more specific the feature requested here is: https://www.mapbox.com/mapbox-gl-js/example/restrict-bounds/

[abegehr]

A bad workaround that looks awful is to check if the visible bounds are outside of max-bounds in the regionIsChanging (or regionDidChange) callbacks:

onRegionIsChanging = async () => {
    //console.log("onRegionIsChanging");

    const visibleBounds = await this._map.getVisibleBounds();
    //console.log("=>visible bounds:", visibleBounds);
    this.fitInMaxBounds(visibleBounds);
  };

fitInMaxBounds() basically checks if the visible Bounds are outside of the maxBounds rect and if they are, calculates new visible bounds and calls this._map.fitBounds(). This is a horrible solution, but as good as we can do for now?

@nitaliano is there a better (native) way of implementing maxBounds?

[atomheartother]

My implementation, doesn't go back to bounds' center like @abegehr's, instead snaps back to the edge the user just passed. I use this on regionIsChanging + regionDidChange in case regionIsChanging fails (happens sometimes).

It's a bit jittery but it works:

  async regionChangeHandler() {
    let coords = await this._map.getVisibleBounds();
    const center = [
      (coords[0][0] + coords[1][0]) / 2,
      (coords[0][1] + coords[1][1]) / 2,
    ];
    let move = false;
    if (coords[0][0] > maxBounds[0][0]) {
      // NE ->
      move = true;
      center[0] -= coords[0][0] - maxBounds[0][0];
    }
    if (coords[0][1] > maxBounds[0][1]) {
      // NE ^
      move = true;
      center[1] -= coords[0][1] - maxBounds[0][1];
    }
    if (coords[1][0] < maxBounds[1][0]) {
      // SW <-
      move = true;
      center[0] += maxBounds[1][0] - coords[1][0];
    }
    if (coords[1][1] < maxBounds[1][1]) {
      // SW v
      move = true;
      center[1] += maxBounds[1][1] - coords[1][1];
    }
    if (move) {
      this._map.moveTo(center, 100);
    }
  }

Note: This specific implementation relies on you being on the north-east hemisphere, simply because that's where my app's map is, this code most definitely won't run anywhere out of the box, but you can at least adapt it.

[onitzschke]

maxBounds would be a great feature. Any news?

[winseyli]

any news?

[merijnlioen]

Any news?

[atomheartother]

Any news?

Fyi this repo has been deprecated, go to https://github.com/react-native-mapbox-gl/maps

[JClackett]

yeah, as mentioned above - this package is deprecated, im gna close this!