Map annotations in SwiftUI
In this article, I will show you how to add map annotations to your SwiftUI Map() .
The basics
In SwiftUI there are three types of annotations: MapPin , MapMarker and MapAnnotation . All three mark a map location. While MapPin and MapMarker have a predefined appearance, MapAnnotation displays a custom view. For each annotation you want, you need an item in an array. Pass this array to the annotationItems parameter of the Map() . The map annotation is defined in the trailing closure.
Tip: When you only want one annotation, simply put your item in square brackets like
[Item].
MapPin and MapMarker
MapPin and MapMarker are technically the same, they just have different shapes. MapPin is pin shaped and MapMarker balloon shaped.
The coordinate parameter determines the location of the annotation. Locations are stored in CLLocationCoordinate2D that define the latitude and longitude . You can also change the color of the annotation, by adding tint: Color to the MapPin or MapMarker .
MapAnnotations
MapAnnotations display a custom view on a map location. For this one I will display some of the locations from macOS versions. To store them I use a custom structure named MacOSLocation .
For every macOS location the map adds a MapAnnotation . The coordinate is set to the location’s coordinate. The view consists of the wallpaper, that has a height of 25. The width of 100 is overwritten by .scaledToFit() , but is necessary that the view can be displayed. The image has the shape of a circle, a stroke overlay and a shadow.
This is the output of the view. It looks gorgeous! With MapAnnotation there are nearly endless possibilities to create very good looking annotations.
Tip: Try to keep your map annotations as clean and simple as you can. When using text or detailed view elements, add shadows or a background, so that the annotation can still be seen good on complex map backgrounds.
MKMapView annotations
You can also add MKMapView annotations to your map. Here’s an example on how to add a MKPointAnnotation() to a Map(). The syntax is the same, you just add it to the init() of the view.
When you have many annotations (especially MapAnnotations ) on your view, the view can be laggy, or the annotations hide when you move the map. To remedy that you can change the @State var region to var region and $region to .constant(region) . The map automatically has much better performance.
Tip: When you have many or complex annotations, change the map type to
.mutedStandard, this makes the map less colorful and the annotations are easier to see.
Conclusion
SwiftUI’s Map() has three very powerful annotation options, that should cover all of your use cases. And if you need MKMapView annotations, you can use them as well. If you want to learn more about styling your map, feel free to check my article about that topic out.
