maps: PaddingBottom on Camera fitBounds does not work anymore

Describe the bug Using this.camera.fitBounds([lng, lat], [lng, lat], [0, 0, bottom, 0], 1000), the bottom padding attribute work as Vertical padding ignoring the 0 for top padding and using the same value as bottom.

To Reproduce Calling this.camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000) setting the bottom padding by half screen height and 0 (or any other value) for top, right, left.

Example:


	selectRoute = () => {
		...
		this.fitBounds( [highLong, highLat], [lowerLong, lowerLat], [0, 0, height*0.5, 0]);
	}

	fitBounds(northEast: SingleCoordinate, southWest: SingleCoordinate, padding: Array<number> = [50,50,50,50]) {
		this.camera.fitBounds(northEast, southWest, padding, 500);
	}

	render() {
		return (
			<MapboxGL.Camera
				ref={camera => this.camera = camera}
				followUserLocation={false}
				followUserMode={'normal'}
			/>
		)
	}

Expected behavior The center of northEastCoordinates and southWestCoordinates used must be at the center of the upper half of the screen (padding half height). However it is centered in the middle of screen.

Versions (please complete the following information):

Platform: Android, iOS 13.3.1 Device: Iphone XR react-native-mapbox-gl Version 8.0.0-rc1 (8.0.0)* React Native Version 0.61.5 Mapbox Version 1.0.0-beta10

It works fine with react-native-mapbox-gl Version 7.2.0

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 17 (8 by maintainers)

Most upvoted comments

I installed 8.1.0rc2, used the suggested fix on iOS, and tested the example code above. On both platforms, the fit bounds button worked on the first press.

I then pressed the button again without moving the map. On iOS, nothing happened, which seems like the intended behavior. On Android, the map moved up a bit, then an error appeared: Unable to calculate appropriate zoom level for bounds. Vertical or horizontal padding is greater than map's height or width.

sunny-lirr on Jul 7, 2020

@cglacet this should be addressed by #973, can you please verify?!

https://github.com/react-native-mapbox-gl/maps/issues/956#issuecomment-665886930

mfazekas on Aug 5, 2020

Example to reproduce the issue:

import React from 'react';
import {SafeAreaView, Button} from 'react-native';
import MapboxGL, {
  MapView,
  ShapeSource,
  LineLayer,
  Camera,
} from '@react-native-mapbox-gl/maps';

import accessToken from './accesstoken.json';

MapboxGL.setAccessToken(accessToken);

const aLine = {
  type: 'LineString',
  coordinates: [[-74.00597, 40.71427], [-74.00697, 40.71527]],
};

class BugReportExample extends React.Component {
  render() {
    return (
      <SafeAreaView style={{flex: 1, flexDirection: 'column'}}>
        <Button
          title="fitBounds"
          onPress={() => {
            this.camera.fitBounds(
              [-74.00597, 40.71427],
              [-74.00697, 40.71527],
              [0, 0, 300, 0],
            );
          }}
        />
        <MapView style={{flex: 1}}>
          <Camera
            centerCoordinate={[-74.00597, 40.71427]}
            zoomLevel={14}
            ref={ref => {
              this.camera = ref;
            }}
          />
          <ShapeSource id="idStreetLayer" shape={aLine}>
            <LineLayer id="idStreetLayer" />
          </ShapeSource>
        </MapView>
      </SafeAreaView>
    );
  }
}

export default BugReportExample;

mfazekas on Jun 30, 2020

@baijii pls check this comment: https://github.com/mapbox/mapbox-gl-native-ios/issues/198#issuecomment-620387699

I think top padding is not ignored, it’s just looks it considered as a minimum padding and it’s always made symmetrical.

And sure this issue is likely coming from the C++ layer which is common in ios and android.

mfazekas on May 2, 2020