Offset map center

[maciekish]

Hi,
Is it possible to easily offset what the map treats as it centre? We want the map to follow the users position more like a navigation app where the "car" is much lower on the screen so that you can see further ahead.

I've looked for a value that defines the center but wasn't able to find anything. We have our own fork so it doesn't matter what the change is as long as it's possible.

Thanks
Maciej

[picciano]

+1

[Zakay]

+1 Both Apple and Google uses this offset thing on their map apps. Would be very useful to have!

[ljbade]

/cc @1ec5

[incanus]

Both Apple and Google uses this offset thing on their map apps.

Just to clarify, this is in their own user-facing apps, not their developer-facing frameworks.

But agree.

[1ec5]

This is in some ways blocked by #1041: currently “user tracking” consists of moving the user dot in response to user location changes, then synchronizing the map’s center point in response. A better approach would be to affix the user dot to a set location on-screen (usually the center point but in this case somewhere near the bottom) and pan the map directly in response to user location changes. The logic in -[MGLMapView locationManager:didUpdateLocations:] may need to be rewritten, especially due to tilting, which is typically used with course tracking mode.

[ljbade]

@1ec5 Glueing the dot to the screen centre then moving the map was the approach @tobrun took in the Android code.

[RomainQuidet]

Apple MapKit uses 2 APIs for this using insets:

• (void)setVisibleMapRect:(MKMapRect)mapRect
  edgePadding:(UIEdgeInsets)insets
  animated:(BOOL)animate

and

• (MKMapRect)mapRectThatFits:(MKMapRect)mapRect
  edgePadding:(UIEdgeInsets)insets

[1ec5]

We have -setVisibleCoordinateBounds:edgePadding:animated: already; a -coordinateBoundsThatFits:edgePadding: would certainly complement it. But I think this request is more about having MGLMapView offset the center when automatically panning due to user location tracking.

One thing I’m stuck on is how best to present this option to developers: should it be a percentage or an absolute pixel? Should we measure from the view’s edge to the annotation view’s edge, or to its center? The thought crossed my mind of allowing the annotation view to be constrained using Auto Layout – the map view would effectively pin the map view to the annotation – but maybe that’d be too difficult to work with.

[RomainQuidet]

Ok, it's something not available on Apple MapKit. We have this feature on our map at Mappy, we just expose a property to users in the framework:
@Property (nonatomic, assign) UIEdgeInsets insets;

This inset is used when centering the map at coordinates or at the user position or when setting the region.
This allow users to offset the center easily, add other views above the map and keep the map's center where it should be.
Internal code is quite clean by using the insets property to compute the map center.

[1ec5]

So if you have course tracking on and want to push the puck down to the bottom, as depicted in #2600 (comment), you’d set a very large top inset, correct? That sounds reasonable. In fact, under the hood, we’ll want methods like -setCenterCoordinate: to respect an implicit top or bottom inset whenever there’s a top or bottom layout guide.

[RomainQuidet]

Yes, it's working like that.
User defines a mapView frame, and then sets an inset. The frame displays a full map, centered on the inset rectangle center.

[1ec5]

Both the iOS and OS X versions of MGLMapView need this functionality regardless of the user tracking mode, because it’s common for there to be a translucent top bar overlay. On iOS, MGLMapView’s center should account for the top and bottom layout guides; on OS X, if the MGLMapView occupies the entire content view and the content view is full size, the center should account for the toolbar.

[lgeromegnace]

Hi, I'm working at Mappy.
I start working on this issue. I will try to apply the idea previously proposed by @RomainQuidet about using inset. I think mbgl::View interface could be the right place to hold the inset informations and let the Map use it to update the center correctly. This way it will benefit from both android and iOS platforms.
If it works we will make a pull-request.

[tobrun]

From the Android side, this is something that should be tackled with #3276

[tobrun]

To clarify above, I was looking at this from an Android View being overlaid on a Map,
@1ec5 is tackling this using mbgl, which is the correct way.

[1ec5]

#3583 adds content insets and shifts the map’s visual center point to account for any translucent top and bottom bars.

#3589 pushes the visual center even further downward in course tracking mode. Note that in both Apple’s Maps application and Google Maps, the user puck is only offset in turn-by-turn mode, but not before you complete the first step (e.g., leaving the parking lot). So the puck’s position will be configurable.

[1ec5]

We have -setVisibleCoordinateBounds:edgePadding:animated: already; a -coordinateBoundsThatFits:edgePadding: would certainly complement it.

Implemented in #4790.

[leonardodev]

• (void)mapView:(MKMapView*)mapView didSelectAnnotationView:(YLAnnotationView*)pinView
  {
  [self moveCenterByOffset:CGPointMake(0, -100) from:pAnnotation.coordinate];
  }

where

• (void)moveCenterByOffset:(CGPoint)offset from:(CLLocationCoordinate2D)coordinate
  {
  CGPoint point = [self.oMapView convertCoordinate:coordinate toPointToView:self.oMapView];
  point.x += offset.x;
  point.y += offset.y;
  CLLocationCoordinate2D center = [self.oMapView convertPoint:point toCoordinateFromView:self.oMapView];
  [self.oMapView setCenterCoordinate:center animated:YES];
  }

[1ec5]

@leonardodev, panning to fit a selected annotation is unrelated to this issue, but it would be great for the SDK to have that functionality built in: #3249.

[Michael11358]

@leonardodev Great solution, but it doesn't take into account different zoom levels. If I'm on a different zoom level, the coordinate point messes up. Any suggestions to fix that?

[surfnrad]

I'm confused about whether this was answered for Android. It seems that it was achieved as a feature for iOS. Any insights to Android, particularly Kotlin? Is this possible with Mapbox Maps SDK or is it necessary to switch to Navigation UI?