Search code examples
swiftuimapkitrealitykitvisionos

How to display 3D map in RealityKit?


Is there existing library or 3rd party tools that can render something like this in RealityKit, given an arbitrary coordinate?

enter image description here

I tried adding MapKit with .realistic elevations in RealityView, but it's rendered as a flat surface.

Map(
    initialPosition: .camera(
      MapCamera(centerCoordinate: someCoordinate, distance: 2000, heading: 0, pitch: 45))
)
.mapStyle(.standard(elevation: .realistic))


Solution

  • In visionOS 1.1, Apple MapKit's (like any other map-generating framework) maps can't be rendered as real 3D objects (even when Realistic Elevation is turned on). The maps can show pseudo 3D elevation only on a flat 2D layer, the same way as SceneKit's 3D scene is rendered as 2D view in visionOS.

    import SwiftUI
    import RealityKit
    import MapKit
    
    @main struct YourApp : App {
        var body: some Scene {
            WindowGroup {
                ContentView()
            }
            .windowStyle(.volumetric)
            .defaultSize(width: 0.5, height: 0.5, depth: 0.5, in: .meters)
        }
    }
    

    struct ContentView : View {
        let map = Map(initialPosition:
                .camera(MapCamera(centerCoordinate: .init(latitude: 38.897957, 
                                                         longitude: -77.036560), 
                                          distance: 2000, heading: 0, pitch: 45))
        )
        var body: some View {
            map
                .mapStyle(.standard(elevation: .realistic))
                .mask(Circle())
                .rotation3DEffect(.degrees(90), axis: .x)
                .frame(depth: 900, alignment: .center)
            
            RealityView { content in
                let cylinder = ModelEntity(mesh: .generateCylinder(height: 0.05, 
                                                                   radius: 0.14))
                cylinder.position += [0.0, 0.22, 0.08]
                content.add(cylinder)
            }
        }
    }
    

    enter image description here

    Here is only one solution: create 3D elevation objects yourself.