MKUserTrackingBarButtonItem in Mapbox

Question

I'm evaluating switching from MapKit to Mapbox.

I already found equivalents for all of my functions, except the MKUserTrackingBarButtonItem.

let trackingButton = MKUserTrackingBarButtonItem(mapView: map)

Is there a way to create this button for the Mapbox iOS SDK?

I haven't found anything similar in the Mapbox documentation and I can't continue using this function, because it requires an MKMapView.

Thanks in advance.

Answer 1

Just in case anyone else is interested, here is this this answer translated to Swift in a simple ViewController. I just left out .FollowWithCourse to copy the behavior of MKUserTrackingBarButtonItem.

class ViewController: UIViewController, MGLMapViewDelegate {

    @IBOutlet weak var map: MGLMapView!
    @IBOutlet weak var toolbar: UIToolbar!

    override func viewDidLoad() {
        super.viewDidLoad()

        map.delegate = self

        map.setCenterCoordinate(CLLocationCoordinate2D(latitude: 40.7326808, longitude: -73.9843407), zoomLevel: 12, animated: false)

        let trackingButton = UIBarButtonItem(image: UIImage(named: "TrackingLocationOffMask"), style: UIBarButtonItemStyle.Plain, target: self, action: "trackingButtonChanged")
        toolbar.items!.insert(trackingButton, atIndex: 0)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func mapView(mapView: MGLMapView, didChangeUserTrackingMode mode: MGLUserTrackingMode, animated: Bool) {
        var image: String = "TrackingLocationOffMask.png"

        switch (mode) {
        case .Follow:
            image = "TrackingLocationMask.png"
            break
        case .FollowWithHeading:
            image = "TrackingHeadingMask.png"
            break
        default:
            break
        }

        UIView.animateWithDuration(0.25, animations: {
            (self.toolbar.items![0] as UIBarButtonItem).image = UIImage(named: image)
        })
    }

    func trackingButtonChanged() {
        var mode: MGLUserTrackingMode = .Follow

        switch (map.userTrackingMode) {
        case .Follow:
            mode = .FollowWithHeading
            break
        case .FollowWithHeading:
            mode = .None
            break
        default:
            break
        }

        map.userTrackingMode = mode
    }
}

The images are here at mapbox-gl-native on GitHub.

Answer 2

An equivalent to MKUserTrackingBarButtonItem doesn’t yet exist in the Mapbox iOS SDK (as of v3.1), but there is a basic implementation in the project’s demo app:

- (void)viewDidLoad
{
    ...

    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] 
        initWithImage:[UIImage imageNamed:@"TrackingLocationOffMask.png"]
        style:UIBarButtonItemStylePlain
        target:self
        action:@selector(locateUser)];
}

- (void)locateUser
{
    MGLUserTrackingMode nextMode;
    switch (self.mapView.userTrackingMode) {
        case MGLUserTrackingModeNone:
            nextMode = MGLUserTrackingModeFollow;
            break;
        case MGLUserTrackingModeFollow:
            nextMode = MGLUserTrackingModeFollowWithHeading;
            break;
        case MGLUserTrackingModeFollowWithHeading:
            nextMode = MGLUserTrackingModeFollowWithCourse;
            break;
        case MGLUserTrackingModeFollowWithCourse:
            nextMode = MGLUserTrackingModeNone;
            break;
    }
    self.mapView.userTrackingMode = nextMode;
}

- (void)mapView:(__unused MGLMapView *)mapView didChangeUserTrackingMode:(MGLUserTrackingMode)mode animated:(__unused BOOL)animated
{
    UIImage *newButtonImage;
    NSString *newButtonTitle;

    switch (mode) {
        case MGLUserTrackingModeNone:
            newButtonImage = [UIImage imageNamed:@"TrackingLocationOffMask.png"];
            break;

        case MGLUserTrackingModeFollow:
            newButtonImage = [UIImage imageNamed:@"TrackingLocationMask.png"];
            break;

        case MGLUserTrackingModeFollowWithHeading:
            newButtonImage = [UIImage imageNamed:@"TrackingHeadingMask.png"];
            break;
        case MGLUserTrackingModeFollowWithCourse:
            newButtonImage = nil;
            newButtonTitle = @"Course";
            break;
    }

    self.navigationItem.rightBarButtonItem.title = newButtonTitle;
    [UIView animateWithDuration:0.25 animations:^{
        self.navigationItem.rightBarButtonItem.image = newButtonImage;
    }];
}