How show map annotations when map span will be 0.1?

Question

How show map annotations when map span will be 0.1? I want map pins to not show until map span is <= 0.1

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

struct ContentView: View {
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275), span: MKCoordinateSpan(latitudeDelta: 10, longitudeDelta: 10))

    let annotations = [
        City(name: "London", coordinate: CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275)),
        City(name: "Paris", coordinate: CLLocationCoordinate2D(latitude: 48.8567, longitude: 2.3508)),
        City(name: "Rome", coordinate: CLLocationCoordinate2D(latitude: 41.9, longitude: 12.5)),
        City(name: "Washington DC", coordinate: CLLocationCoordinate2D(latitude: 38.895111, longitude: -77.036667))
    ]

    var body: some View {
        Map(coordinateRegion: $region, annotationItems: annotations) {
            MapPin(coordinate: $0.coordinate)
        }
        .frame(width: 400, height: 300)
    }
}

How can this be done?

score 0 · Accepted Answer · answered Feb 01 '23 at 11:47

You can't with MapPin because it's a type of protocol not View. Instead of it you can use MapAnnotation. Since your region parameter is binding the view, you can check map span and show/hide your annotation like this;

Map(coordinateRegion: $region, annotationItems: annotations) {
    MapAnnotation(coordinate: $0.coordinate) {
        // Use whatever value instead of 2.5
        if region.span.latitudeDelta < 2.5 {
            Image(systemName: "mappin")
                .resizable()
                .frame(width: 18, height: 36)
                .foregroundColor(Color.red)
        } else {
            EmptyView()
        }
    }
}
.frame(width: 400, height: 300)

How show map annotations when map span will be 0.1?

1 Answers1