question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PaddingBottom on Camera fitBounds does not work anymore

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:16 (8 by maintainers)

github_iconTop GitHub Comments

5reactions
sunny-lirrcommented, Jul 7, 2020

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.

1reaction
mfazekascommented, Aug 5, 2020
Read more comments on GitHub >

github_iconTop Results From Across the Web

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 ...
Read more >
Google Maps fitBounds not applying padding when only one ...
A workaround for the problem is using the panBy method when there is only one point after calling the fitBounds method, like in...
Read more >
Bountysource
PaddingBottom on Camera fitBounds does not work anymore.
Read more >
Fit a map to a bounding box | Mapbox GL JS
This example zooms and pans the map so the new visible area of the map fits within the specified geographical bounds.
Read more >
PDF - Introduction to Web Mapping
A web map1 is an interactive display of geographic information, in the form of a web page, that you can use to tell...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found