Map Annotation in SwiftUI
Map view in SwiftUI allows us to add map annotation with a simple API. Map view takes annotations as an array and place them on to the map.
For this, we will need to create a data structure which we will supply to the annotation parameter.
Out struct will be called AnnotationItem. This struct will conform to identifiable protocol and will have name and coordinate properties as shown below:
struct AnnotationItem: Identifiable {
let id = UUID()
var name: String
var coordinates: CLLocationCoordinate2D
}We will some Points Of Interest(POIs) in an extension to the AnnotationItem as shown below:
extension AnnotationItem {
static var POI: [AnnotationItem] {
[
AnnotationItem(name: "Golden Gate Bridge", coordinates: CLLocationCoordinate2D(latitude: 37.779339, longitude: -122.433609)),
AnnotationItem(name: "San Diego Zoo", coordinates: CLLocationCoordinate2D(latitude: 33.095829, longitude: -117.008797)),
AnnotationItem(name: "Statue Of Liberty", coordinates: CLLocationCoordinate2D(latitude: 40.689247, longitude: -74.044502)),
AnnotationItem(name: "Empire State Building", coordinates: CLLocationCoordinate2D(latitude: 40.74853801503154, longitude: -73.98590043614894)),
]
}
}With this setup, we are ready to include annotations into the map:
struct MapAnnotationExample: View {
@State private var region = MKCoordinateRegion(center: AnnotationItem.POI[0].coordinates, latitudinalMeters: 5000, longitudinalMeters: 5000)
var body: some View {
Map(coordinateRegion: $region, annotationItems: AnnotationItem.POI) { item in
MapMarker(coordinate: item.coordinates, tint: .green)
}
.edgesIgnoringSafeArea(.all)
}
}
We can change MapMarker to MapPin with a simple word change as shown below:
struct MapAnnotationExample: View {
@State private var region = MKCoordinateRegion(center: AnnotationItem.POI[0].coordinates, latitudinalMeters: 5000, longitudinalMeters: 5000)
var body: some View {
Map(coordinateRegion: $region, annotationItems: AnnotationItem.POI) { item in
MapPin(coordinate: item.coordinates, tint: .green)
}
.edgesIgnoringSafeArea(.all)
}
}
We are not limited to MapMarker or MapPin. We can create our own UI for a annotation view.
For this, we will use MapAnnotation struct and for the content parameter, we will create a ZStack along with few Image views, as shown below:
struct MapAnnotationExample: View {
@State private var region = MKCoordinateRegion(center: AnnotationItem.POI[0].coordinates, latitudinalMeters: 5000, longitudinalMeters: 5000)
var body: some View {
Map(coordinateRegion: $region, annotationItems: AnnotationItem.POI) { item in
MapAnnotation(coordinate: item.coordinates) {
ZStack {
Image(systemName: "flag.circle.fill")
.font(.largeTitle)
Image(systemName: "arrow.down")
.offset(y: 20)
}.foregroundStyle(LinearGradient(colors: [Color.green, Color.pink], startPoint: .top, endPoint: .bottom))
.background(Circle())
}
}
.edgesIgnoringSafeArea(.all)
}
}
With that we have reached the end of this article. Thank you once again for reading. Subscribe to our weekly newsletter at https://www.devtechie.com