CODEWITHSUNDEEP
xcodeswiftui3dmapkitmkmapview
Jordan Trana
Jordan Trana

Reputation: 1516

How can I set `mapType` in a MapKit Map in SwiftUI so it can appear as a 3D globe?

How can I set mapType in a MapKit Map in SwiftUI so it can appear as a 3D globe?

I'm looking for a way to set mapType to .hybridFlyover:

mapview.mapType = MKMapType.hybridFlyover

But for SwiftUI:

import SwiftUI
import MapKit

struct LocationGlobeView: View {
    @State private var cities: [City] = [
            City(coordinate: .init(latitude: 40.7128, longitude: 74.0060)),
            City(coordinate: .init(latitude: 37.7749, longitude: 122.4194)),
            City(coordinate: .init(latitude: 47.6062, longitude: 122.3321))
        ]
    
    @State private var userTrackingMode: MapUserTrackingMode = .follow
    @State private var region = MKCoordinateRegion(
            center: CLLocationCoordinate2D(
                latitude: 25.7617,
                longitude: 80.1918
            ),
            span: MKCoordinateSpan(
                latitudeDelta: 10,
                longitudeDelta: 10
            )
        )
    
    var body: some View {
        Map(coordinateRegion: $region,
            interactionModes: MapInteractionModes.all,
            showsUserLocation: true,
            userTrackingMode: $userTrackingMode,
            annotationItems: cities) { city in
                        MapAnnotation(coordinate: city.coordinate,
                                      anchorPoint: CGPoint(x: 0.5, y: 0.5)) {
                            Circle()
                                .stroke(Color.green)
                                .frame(width: 44, height: 44)
                        }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

struct LocationGlobeView_Previews: PreviewProvider {
    static var previews: some View {
        LocationGlobeView()
    }
}

struct City: Identifiable {
    let id = UUID()
    let coordinate: CLLocationCoordinate2D
}

How can I make a SwiftUI view that allows for Map to be a 3D Globe?

Upvotes: 1

Views: 1129

Answers (1)

AirXygène
AirXygène

Reputation: 2921

From macOS 14, iOS 17 on, you can use the following modifier on your Map View.

.mapStyle(.imagery())

Upvotes: 0

Related Questions