Disable continuous world

Describe the bug The javascriptSDK seems to allow to disable world wrapping: https://docs.mapbox.com/mapbox.js/example/v1.0.0/disable-world-wrapping/

But it doesn’t seem possible with this SDK, I’ve scoured around the docs, tried to set a camera with bounds:

        <Mapbox.MapView
          style={{ flex: 1 }}
          styleURL={`file://${RNFS.DocumentDirectoryPath}/style.json`}
          logoEnabled={false}
        >
          <Mapbox.Camera
            bounds={{
              ne: [80, 170],
              sw: [-80, -170],
            }}
            animationDuration={300}
            maxZoom={19}
            pitch={60}
          />
        </Mapbox.MapView>

But I can still scroll infinitely within the mapview

Expected behavior Being able to turn of world wrapping

Screenshots

Versions: Platfrom: Android, iOS Device: iPhone6 OS: 12 SDK Version 7.0.1 React Native Version 0.59.9

[ospfranco]

So, I ended up implementing a very simple bound checking algorithm, it kinda works, but it definitely not smooth and sometimes you can still escape the bounding limits (because the tileset is covering the entire map).

Here is the code:

private regionIsChanging = (regionFeature: any) => {
    const { initialBounds, setInitialBounds } = this.props;

    /**
     * Visible bounds is array of to LNG/LAT coordinates
     * [0]: is the north east corner
     * [1]: is the south west corner
     */

    const visibleBounds: any = regionFeature.properties.visibleBounds;

    if (!initialBounds) {
      setInitialBounds(visibleBounds);
      return;
    } else {
      /**
     * Remember latitude is vertical (ex: germany is in a high positive latitude)
     * and longitue is horizontal (ex: south america is in a negative longitude)
     * 
     * We need to disable world wrapping, which is not possible in the RN, ios and android mapbox sdks
     * So this is a very simple proof to prevent the user from scrolling where he is not supposed to
     */
      const ne = visibleBounds[0];
      const sw = visibleBounds[1];

      const initialNe = initialBounds[0];
      const initialSw = initialBounds[1];
      /**
       * Another remark, only horizontal infinite scrolling is happening, so we only need to check the longitude
       */
      // NE corner difference to bounding box
      const neDiff = ne[0] - initialNe[0];
      // SW corner difference to bounding box;
      const swDiff = sw[0] - initialSw[0];

      // console.warn('neDiff', neDiff, 'swDiff', swDiff);



      if (neDiff > 0 || swDiff < 0) {
        const camera = this.cameraRef.current!;


        if (neDiff > 0) {
          // basically move camera to the left, until it fits the bounds
          const newNe = [ne[0] - neDiff, ne[1]];
          const newSw = [sw[0] - neDiff, sw[1]];
          const center = [(newNe[0] + newSw[0]) / 2, (newNe[1] + newSw[1]) / 2];

          camera.moveTo(center, 100)
        }

        if (swDiff < 0) {
          // console.warn('setting camera bounds 2');
          // basically move camera to the right, until it fits the bounds
          const newNe = [ne[0] - swDiff, ne[1]];
          const newSw = [sw[0] - swDiff, sw[1]];
          const center = [(newNe[0] + newSw[0]) / 2, (newNe[1] + newSw[1]) / 2];


          camera.moveTo(center, 100)
        }
      }
    }
  }

<Mapbox.MapView
          ref={this.mapRef}
          style={{ flex: 1 }}
          styleURL={`file://${RNFS.DocumentDirectoryPath}/style.json`}
          logoEnabled={false}
          onRegionIsChanging={this.regionIsChanging}
        >
          <Mapbox.Camera
            animationDuration={100}
            ref={this.cameraRef}
          />
        </Mapbox.MapView>

I would still prefer a proper solution though

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.