Homework 10: Map it!

In this assignment, you’ll build a map-based app that lets users navigate to several locations. Each link passes latitude, longitude, and a map type to a shared MapView struct, updating the map display on each tap. If you need a refresher on how navigation links work, review the Anatomy of a Link page.

Demo

Video: A screen recording of the iOS Simulator showing the finished Map It app. An interactive map fills the screen with a pin placed at a specific location, demonstrating the completed MapKit integration.

Get Started

1. Create a new Xcode project named MapProject (or something similar).
2. Create a new SwiftUI file. Name it exactly MapView — spelling and capitalization matter here.
3. Replace everything in MapView.swift with the code below. Do not modify it yet — just get it compiling first.

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    var thelat = Double()
    var thelong = Double()
    var pickMap = Int()
    var whichMap = [MKMapType.standard, MKMapType.hybrid, MKMapType.satellite]

    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }

    func updateUIView(_ uiView: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(
            latitude: thelat,
            longitude: thelong)
        let span = MKCoordinateSpan(latitudeDelta: 0.0002, longitudeDelta: 0.0002)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        uiView.setRegion(region, animated: true)
        uiView.mapType = whichMap[pickMap]
    }
}

#Preview {
    MapView(thelat: 34.011286, thelong: -116.166868)
}

Your Tasks

Task 1: Three sets of three links. In ContentView, create 9 navigation links total — three sets of three, each set pointing to a different real-world location. Each link passes three values to MapView: the latitude, the longitude, and a pickMap value (0, 1, or 2). Within each set, the three links should display the same location in standard, hybrid, and satellite map views respectively.

To find coordinates: open the location in Google Maps in your browser, right-click it, and choose What’s here? — the latitude and longitude appear at the bottom of the screen. Include the negative sign if present.

Task 2: Zoom level variables. Add two new variables to MapView for latitudeDelta and longitudeDelta (currently hardcoded to 0.0002). Once the variables exist, update your links in ContentView to pass different values to them — so each link can show a different-sized area of the map.

Task 3: Navigation title. Add a NavigationView to ContentView and apply a .navigationTitle modifier to each map page so each location is clearly labeled when you navigate to it.

Task 4: Styled, extracted links. Style your 9 links to look great, then extract the link styling into a reusable view struct with variables — just as you did with extracted views earlier in the course. Each link should use the same extracted view, with variables controlling the label, coordinates, and map type. If you’ve updated to Xcode 16 or newer, use Refactor → Extract Selection to File instead of the old Extract to Subview option. You’ll then need to add import SwiftUI, a proper struct declaration, and a var body: some View.