SwiftUI offers versatile options for displaying annotations in map views, including map pins, markers, and custom annotations. This article guides you through showcasing London’s notable locations using these annotation types, tailored for iOS14 and Xcode 12, accessible via Apple’s developer portal.

Setting Up the Project Environment

Begin by launching Xcode, either creating a new project directly from the startup window or through File > New > Project. Opt for iOS in the platform selection, choose the App template, and proceed. Name your project SwiftUIMapAnnotationTutorial, selecting SwiftUI for both Interface and Life Cycle and Swift as the programming language. Omit the Tests option and select a save location on your Mac.

Implementing Place Struct for Location Data

Initiate by importing the MapKit framework at the top of your ContentView.swift file. Create a ‘Place’ structure within the file to manage the coordinates of various locations. This structure will serve as the foundation for mapping landmarks.

Configuring ContentView with Map View

Modify the ContentView struct to include an array of places, highlighting key London attractions with corresponding coordinates. Declare a State property for the region, setting it to a specific area in London. Implement a Map view in ContentView to depict these regions, each marked with an annotation.

Key Features of Different SwiftUI Map Annotations

Map Pins:

  • Simple and straightforward design;
  • Ideal for basic mapping requirements;
  • Offers a traditional map pin appearance.

Map Markers:

  • More visually distinctive than map pins;
  • Suitable for highlighting specific locations;
  • Customizable color options are available.

Custom Map Annotations (MapAnnotation):

  • Highly customizable for unique designs;
  • Allows integration of SwiftUI views;
  • Best for interactive and complex map features. 

Applying Different Annotation Types

SwiftUI currently limits to one annotation type per map view. Begin with the MapPin annotation for basic pin representations. Next, transition to the MapMarker for a more distinct marker style. Lastly, incorporate the MapAnnotation for custom designs like circles with red outlines, enhancing visual appeal.

Comparative Table: Map Pins, Map Markers, and Custom Map Annotations

FeatureMap PinsMap MarkersCustom Annotations
DesignBasic PinEnhanced MarkerFully Customizable
Visual AppealTraditionalModernInteractive
Use CaseBasic MappingDetailed MappingAdvanced Applications
Integration EaseHighModerateRequires More Coding

Example Code Snippet for Implementing Map Annotations in SwiftUI

import SwiftUIimport MapKit
struct ContentView: View {    // Define landmarks as an array of Place    let landmarks = [        Place(name: “Tower Bridge”, latitude: 51.5055, longitude: -0.0754),        Place(name: “Buckingham Palace”, latitude: 51.5014, longitude: -0.1419)    ]
    // Define the region for the map view    @State private var region = MKCoordinateRegion(        center: CLLocationCoordinate2D(latitude: 51.5074, longitude: -0.1278),        span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)    )
    var body: some View {        Map(coordinateRegion: $region, annotationItems: landmarks) { landmark in            // Choose the type of map annotation here            MapAnnotation(coordinate: landmark.coordinate) {                Circle()                    .strokeBorder(Color.blue, lineWidth: 4)                    .frame(width: 44, height: 44)            }        }    }}
struct Place: Identifiable {    let id = UUID()    let name: String    let latitude: Double    let longitude: Double    var coordinate: CLLocationCoordinate2D {        CLLocationCoordinate2D(latitude: latitude, longitude: longitude)    }}


While SwiftUI’s current version has its limitations in annotation diversity, the tutorial demonstrates effective methods to integrate different types into a map view. For further exploration and practical implementation, the complete source code of the SwiftUIMapAnnotationTutorial is available at the ioscreator repository on GitHub.

Leave a Reply