3D Pucker as user's location mapbox ios

Question

I am using Mapbox Maps iOS to create a custom 3d pucker and use that to display the user's location.

Everything seems to be working, the camera redirects to the user's location, the pucker successfully loads. However, I am having trouble setting the pucker's location to the user's location.

You can see that I am required to set the location of the pucker in the Model instance in the loadCharacter() function. But I am unsure of how to link that to the user's current location.

Please help!!!

// ViewController.swift

import UIKit
import MapboxMaps


public class ViewController: UIViewController {
    internal var mapView: MapView!
    internal var cameraLocationConsumer: CameraLocationConsumer!

    override public func viewDidLoad() {
        super.viewDidLoad()

        let options = MapInitOptions(cameraOptions: CameraOptions(zoom: 16))

        mapView = MapView(frame: view.bounds, mapInitOptions: options)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(mapView)
        
        
        mapView.mapboxMap.onNext(.styleLoaded) { _ in
            self.loadCharacter()
        }
        
        cameraLocationConsumer = CameraLocationConsumer(mapView: mapView)
        
        mapView.mapboxMap.onNext(.mapLoaded) { _ in
            self.mapView.location.addLocationConsumer(newConsumer: self.cameraLocationConsumer)
        }
    }
    
    
    internal func loadCharacter() {

        let uri = Bundle.main.url(forResource: "race_car_model",
                                  withExtension: "gltf")

        // Instantiate the model
        let myModel = Model(uri: uri,
                            position: [-77.150925, 39.085006],
                            orientation: [0, 0, 180])

        // Setting an expression to  scale the model based on camera zoom
        let scalingExpression = Exp(.interpolate) {
            Exp(.linear)
            Exp(.zoom)
            0
            Exp(.literal) {
                [256000.0, 256000.0, 256000.0]
            }
            4
            Exp(.literal) {
                [40000.0, 40000.0, 40000.0]
            }
            8
            Exp(.literal) {
                [2000.0, 2000.0, 2000.0]
            }
            12
            Exp(.literal) {
                [100.0, 100.0, 100.0]
            }
            16
            Exp(.literal) {
                [7.0, 7.0, 7.0]
            }
            20
            Exp(.literal) {
                [1.0, 1.0, 1.0]
            }
        }

        let configuration = Puck3DConfiguration(model: myModel, modelScale: .expression(scalingExpression))
        mapView.location.options.puckType = .puck3D(configuration)

    }
}


// Create class which conforms to LocationConsumer, update the camera's centerCoordinate when a locationUpdate is received
public class CameraLocationConsumer: LocationConsumer {
    weak var mapView: MapView?

    init(mapView: MapView) {
        self.mapView = mapView
    }
    

    public func locationUpdate(newLocation: Location) {

        mapView?.camera.ease(
            to: CameraOptions(center: newLocation.coordinate, zoom: 16, pitch: 50.0),
            duration: 1.3)

    }
}

score 0 · Answer 1 · answered Oct 08 '21 at 13:26

Mapbox has a repo with examples of navigation use cases that you can try, including 3D puck sample.

Note that this sample uses API from Navigation SDK, which in turn uses Maps SDK API internally. Fortunately, Navigation SDK is open-sourced, you can always look at how it draws current user location here.

3D Pucker as user's location mapbox ios

1 Answers1