MapKit for maps in iOS Swift - Mini App: Build & Ship

Build: Simple Map Screen

This screen shows a map centered on a specific location with a pin marker. The user can zoom and pan the map.

Target UI

-------------------------
| Simple Map Screen      |
|-----------------------|
|                       |
|       [Map View]      |
|                       |
|                       |
|                       |
|                       |
|                       |
|                       |
-------------------------

Use MapKit to display a map view

Center the map on New York City coordinates (latitude: 40.7128, longitude: -74.0060)

Add a pin annotation at the center location

Allow user to zoom and pan the map

Starter Code

iOS Swift

import SwiftUI
import MapKit

struct SimpleMapScreen: View {
    // TODO: Add state and map region here

    var body: some View {
        VStack {
            Text("Simple Map Screen")
                .font(.headline)
                .padding()

            // TODO: Add Map view here
            Spacer()
        }
    }
}

struct SimpleMapScreen_Previews: PreviewProvider {
    static var previews: some View {
        SimpleMapScreen()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI
import MapKit

struct SimpleMapScreen: View {
    private let nycCoordinate = CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060)

    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060),
        span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
    )

    var body: some View {
        VStack {
            Text("Simple Map Screen")
                .font(.headline)
                .padding()

            Map(coordinateRegion: $region, annotationItems: [AnnotationItem(coordinate: nycCoordinate)]) { item in
                MapMarker(coordinate: item.coordinate, tint: .red)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .edgesIgnoringSafeArea(.all)
        }
    }
}

struct AnnotationItem: Identifiable {
    let coordinate: CLLocationCoordinate2D
    var id: String { "\(coordinate.latitude),\(coordinate.longitude)" }
}

struct SimpleMapScreen_Previews: PreviewProvider {
    static var previews: some View {
        SimpleMapScreen()
    }
}

We use @State to hold the map region centered on New York City with a small zoom span. The Map view binds to this region so the user can zoom and pan. We create an AnnotationItem struct to hold the pin location and pass it to the Map view's annotationItems parameter. The MapMarker displays a red pin at the center coordinate. The map fills the screen below the title text.

Final Result

Completed Screen

-------------------------
| Simple Map Screen      |
|-----------------------|
|                       |
|       [Map View]      |
|       (Red Pin)       |
|                       |
|                       |
|                       |
|                       |
|                       |
-------------------------

User can drag the map to pan around

User can pinch to zoom in and out

The red pin stays at the center location (New York City)

Stretch Goal

Add a button that when tapped, moves the map to San Francisco with a new pin

💡 Hint

Add a Button below the map that updates the region state to San Francisco coordinates (latitude: 37.7749, longitude: -122.4194) and updates the annotation accordingly