Maps: UserLocation/ Camera: not able to set vertical alignment of position

[ferdicus]

Describe the bug
Old version had a MapView property to set the userLocationVerticalAlignment.
Camera/ UserLocation seem to have shed that property.

Camera does indeed has an interface for alignment,
however it didn't seem to be finished and is also not passed through to the native side.

To Reproduce
Try using the alignment property on Camera.
Notice, that the UserLocation will still be dead center on the MapView instead of on the bottom or top part of the map.

Expected behavior
Using the alignment property will move the UserLocation either to the top or bottom part of the map

Screenshots
na

Versions (please complete the following information):

• Platform: Android/ iOS
• Device: Android LGQ7
• Emulator/ Simulator: no
• OS: Android/ iOS
• SDK Version: irrelevant
• React Native Version: 0.61.5

Additional context
na

[ferdicus]

@mfazekas , you got any insights on this?
I could look into it, not sure where to start though 😅

[mfazekas]

@ferdicus on iOS we'd implement it with:
https://docs.mapbox.com/ios/api/maps/5.0.0/Enums/MGLAnnotationVerticalAlignment.html

see:
https://github.com/nitaliano/react-native-mapbox-gl/pull/897/commits/07a03277872c3501431873b4f704944de980bdde

on android we'd done it with something like this:

https://github.com/nitaliano/react-native-mapbox-gl/pull/897/commits/b3dffe974aa9105416bff7360c8613a94516dcc1

This was the full PR:
https://github.com/nitaliano/react-native-mapbox-gl/pull/897

[dorthwein]

I think MapBox deprecated the position prop in favor of point anchors. We implemented in iOS and have a branch in use in production but I couldn't get android working mainly because I suck at Java. Anyway, heres the PR - never got merged due to failing test build.

https://github.com/react-native-mapbox-gl/maps/issues?utf8=%E2%9C%93&q=anchor

[dorthwein]

Also add this could be an easy implementation https://docs.mapbox.com/android/maps/overview/location-component/#cameramode

[dorthwein]

another insight how to tackle this on Android (already solved with my above pr on iOS

https://stackoverflow.com/questions/16764002/how-to-center-the-camera-so-that-marker-is-at-the-bottom-of-screen-google-map

[ferdicus]

So, I've started work on this in #685
Encountered some roadblocks though.

Thanks for the pointers @dorthwein! This one might help with my first issue:
From your link

Traditional camera transitions will be canceled when any of the camera modes, 
besides CameraMode#NONE, are engaged. 

Use LocationComponent#zoomWhileTracking and LocationComponent#tiltWhileTracking 
to manipulate the camera in a tracking state. 

Use these two in combination with traditional camera transitions and 
MapboxMap#CancelableCallback to schedule fluid transitions.

And that stackoverflow link might lead to new insights on my second issue.

Nevertheless, would love some feedback on the PR from you and @mfazekas when you find the time.

Thanks in advance

[ferdicus]

closed linked PR - instead of dealing with verticalAlignment I instead resorted to simply setting contentInset on mapView.

[dorthwein]

@ferdicus - setting contentInset only moves the attributions for me. Are you having it move how the map centers on a your current location?

If so - can you share a snippet of your map view?

[ferdicus]

Hey @dorthwein, yeah, it does exactly what the docs say (if I've only read them earlier :P)

The distance from the edges of the map view’s frame to the edges of the map view’s logical viewport.

This is how I use it to offset from the top, which will move everything further down.
contentInset={[400, 0, 0, 0]}

Edit: This is on Android, haven't tested on iOS

[dorthwein]

@ferdicus - OMG AWESOME STUFF - LEGIT BEEN A YEAR - 2 YEARS NEEDING THIS AND WORKING AROUND IT! <3

In your defense - I know this functionality has been broken, then working, then broken several times through major release versions etc.... Also very confusing with old docs around Vertical Alignment.

[ferdicus]

Glad it helped, what I've been asking myself since then is: What is VerticalAlignment for then?
Was it ever there? Was it doing anything?! 🤷‍♂️