Model Position Incorrectly Changed from Centre for some Coordinates

[programmer443]

Environment

• Xcode version: 15.3
• iOS version: 17.4
• Devices affected:
• Maps SDK Version: 11.1.0

Observed behavior and steps to reproduce

I encountered an issue where the position of a model in my Mapbox implementation is being inaccurately adjusted for certain coordinates but camera position is fine. The model, which should be centered at specified coordinates, is shifting its position unexpectedly. This behavior occurs despite correct implementation of adding the model, setting camera parameters.

Code for adding model

let plane = Bundle.main.url(
    forResource: "A320",
    withExtension: "glb")!.absoluteString
var source = GeoJSONSource(id: "source-id")
source.maxzoom = 4
try? mapProxy?.map!.addStyleModel(modelId: "model-id-plane", modelUri: plane)
var planeFeature = Feature(geometry: Point(CLLocationCoordinate2D(latitude: 42.97330, longitude: -75.085930)))
planeFeature.properties = ["model-id-key": .string("model-id-plane")]
source.data = .featureCollection(FeatureCollection(features: [planeFeature]))
try? mapProxy?.map!.addSource(source)
var layer = ModelLayer(id: "model-layer-id", source: "source-id")
layer.modelId = .expression(Exp(.get) { "model-id-key" })
layer.modelType = .constant(.common3d)
layer.modelScale = .constant([1, 1, 1])
layer.modelTranslation = .constant([0, 0,  9753.60])
layer.modelRotation = .constant([0, 0, 186])
layer.maxZoom = 23
layer.minZoom = 5
layer.modelRotationTransition = StyleTransition(duration: 0.1, delay: 0.1)
layer.modelTranslationTransition = StyleTransition(duration: 0, delay: 0)
layer.modelCutoffFadeRange = .constant(0.0)
try? mapProxy?.map!.addLayer(layer)

Code for setting camera:

let freeCam = self.mapProxy?.map?.freeCameraOptions          
freeCam?.altitude = 10253.6
freeCam?.location = CLLocationCoordinate2D(latitude: 42.97330, longitude: -75.085930)
freeCam?.setPitchBearingForPitch(0, bearing: 276)
mapProxy?.map?.freeCameraOptions = freeCam!

Expected behavior

Model should appear at the centre like camera

Pictures

[pjleonard37]

Hi @programmer443 -

Thanks for sharing this report and the code sample. To help us replicate, could you provide a smaller example with actual values for the variables in your code for latitude, longitude, etc? This will help to isolate if the issue is in the SDK rather than with incorrect data.

It would be especially helpful if you could recreate the issue outside of your application in a simple implementation of the SDK. For example, you could modify one of our examples.

[programmer443]

Hi @pjleonard37,

Thanks for your reply🙂. I updated my code with actual values for your understanding. Now, I hope so it will help you to reproduce the issue. Here is example project for your reference
https://github.com/programmer443/mapbox_model_example.git

[pjleonard37]

Hi @programmer443 --

Thanks for sharing this sample project; I was able to replicate the behavior in your project. I think the issue is related to how you've set up the SwiftUI <--> UIKit code. I was able to strip down the code a bit more and have made some changes to center the plane model:

Instead of using a Swift UI and UIKit together, I just implemented the solution in Swift UI, which resolves the misalignment you were seeing. Note that this code takes advantage of new SDK features released in the v11.4.0-beta.1 pre-release. You will either need to use this pre-release or main to use these new features until the stable version of v11.4.0 is released (in a few weeks). The key changes are our new tools for Declarative Map Styling, which should dramatically simplify your SwiftUI implementation.

struct ExampleMapModel: View {
    let plane = Bundle.main.url(
        forResource: "A320",
        withExtension: "glb")
    var latitude: CGFloat = 42.97330
    var longitude: CGFloat = -75.085930

    var body: some View {
        MapReader { proxy in
            Map() {
                GeoJSONSource(id: "source-id")
                    .data(.featureCollection(planeFeatures))
                Model(id: "model-id-plane", uri: plane)
                ModelLayer(id: "model-layer-id", source: "source-id")
                    .modelId(Exp(.get) { "model-id-key" })
                    .modelType(.common3d)
                    .modelScale(x: 1, y: 1, z: 1)
                    .modelTranslation(x: 0, y: 0, z: 9753.60)
                    .modelRotation(x: 0, y: 0, z: 90)
                    .maxZoom(23)
                    .minZoom(5)
                    .modelCutoffFadeRange(0.0)
            }
            .mapStyle(.satelliteStreets)
            .onMapLoaded { _ in
                guard let map = proxy.map else { return }
                let freeCam = map.freeCameraOptions
                freeCam.altitude = 10000
                freeCam.location = CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
                freeCam.setPitchBearingForPitch(0, bearing: 180.0)
                map.freeCameraOptions = freeCam
            }

        }
    }
}

var planeFeatures: FeatureCollection {
    var planeFeature = Feature(geometry: Point(CLLocationCoordinate2D(latitude: 42.97330, longitude: -75.085930)))
    planeFeature.properties = ["model-id-key": .string("model-id-plane")]
    return FeatureCollection(features: [planeFeature])
}

These features are currently experimental, so breaking changes may occur across versions. As we refine these features we are very interested in hearing your feedback!

One other note: I'd recommend rotating the access token in your shared project. Instructions can be found here: https://docs.mapbox.com/accounts/guides/tokens/#rotating-access-tokens.

[programmer443]

Hi @pjleonard37 ,
Thanks for your feedback😊. The model position issue is resolved but now I'm facing issue that Model disappears during movement. I attached video for your reference. I am moving the model through translation from position a to b. As you can see from video, camera is still moving to position b but plane disappear.

For model translation I am using this code:

func updateModelPositionByTraslation(lat: Double, lng: Double, alt: Double, head: Double) {
            try? mapProxy?.map?.updateLayer(withId: "model-layer-id", type: ModelLayer.self) { layer in
                // Update layer properties
                layer.modelTranslation = .constant([lng, lat, (50.0).feetToMeter()])
                let headingAngle = head - 90
                layer.modelRotation = .constant([0, 0, headingAngle])
            }
        }

And for camera position I'm using same above code.

Video:

sample.mp4

[programmer443]

@pjleonard37 just checking in on the status of this issue—any updates or ETA for a resolution?
cc: @mapbox-maps-ios

[pjleonard37]

Hi @programmer443 --

I have not been able to reproduce the issue you are seeing locally, and am still investigating.

As a friendly reminder, Model layers are an experimental feature.

[programmer443]

Hi @pjleonard37 @astojilj,
Thank you for your assistance with my previous issue. The solution using SwiftUI has helped simplify the implementation significantly. However, it hasn't solved the actual issue I was experiencing.
The problem where the model wasn't centered correctly was due to the maxZoom setting in the GeoJSONSource. Without setting maxZoom, the model disappears randomly.

Related link: #2152