swiftuimapkitmkannotation

How to add tooltip to Map Annotation in order to show the location name on the Map using MapKit (SwiftUI)


I'm trying to figure out how I can display the title/name of a MapAnnotation when I hover over the Annotation/Marker or when I simply tap on the annotation/Marker. Is there a simple way to do this?

I tried using .help(), but it doesn't display anything on the map...

Here is the relevant code...

  Map(coordinateRegion: $viewModel.region, showsUserLocation: true, annotationItems: viewModel.locations){ location in
    MapAnnotation(coordinate: location.coordinate) {

    Image(systemName: "mappin.circle")
    .help("\(location.name)")

  }
}

Solution

  • You don't add a tooltip to a map annotation. You make your own custom view. You can display it however you want, and show and hide child views as desired. As an example:

    import SwiftUI
    import CoreLocation
    import MapKit
    
    struct MapAnnotationsView: View {
        @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 38.889499, longitude: -77.035230), span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01))
        
        let placeArray: [Place] = [Place(title: "Washington Monument", coordinate: CLLocationCoordinate2D(latitude: 38.889499, longitude: -77.035230))]
        
        var body: some View {
            Map(coordinateRegion: $region, annotationItems: placeArray) { annotation in
                // This makes a generic annotation that takes a View
                MapAnnotation(coordinate: annotation.coordinate) {
                    // This is your custom view
                    AnnotationView(placeName: annotation.title)
                }
            }
        }
    }
    
    struct AnnotationView: View {
        
        let placeName: String
        @State private var showPlaceName = false
        
        var body: some View {
            VStack(spacing: 0) {
                    Text(placeName)
                        .font(.callout)
                        .padding(5)
                        .background(Color.white)
                        .cornerRadius(10)
                        // Prevents truncation of the Text
                        .fixedSize(horizontal: true, vertical: false)
                        // Displays and hides the place name
                        .opacity(showPlaceName ? 1 : 0)
                
                // You can use whatever you want here. This is a custom annotation marker
                // made to look like a standard annotation marker.
                Image(systemName: "mappin.circle.fill")
                    .font(.title)
                    .foregroundColor(.red)
                
                Image(systemName: "arrowtriangle.down.fill")
                    .font(.caption)
                    .foregroundColor(.red)
                    .offset(x: 0, y: -5)
            }
            .onTapGesture {
                withAnimation(.easeInOut) {
                    showPlaceName.toggle()
                }
            }
            
        }
    }
    
    struct Place: Identifiable {
        let id = UUID()
        var title: String
        var coordinate: CLLocationCoordinate2D
    }