{"id":3085,"date":"2020-10-01T15:09:38","date_gmt":"2020-10-01T15:09:38","guid":{"rendered":"http:\/\/4310.mynmi.net\/?page_id=3085"},"modified":"2026-04-23T21:20:48","modified_gmt":"2026-04-23T21:20:48","slug":"map-it","status":"publish","type":"page","link":"https:\/\/nmi.cool\/appdev\/map-it\/","title":{"rendered":"Homework 10: Map it!"},"content":{"rendered":"\n

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<\/code> 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<\/a>.<\/p>\n\n\n\n\n\n

Demo<\/h2>\n\n\n\n

Get Started<\/h2>\n\n\n\n
  1. Create a new Xcode project named MapProject<\/strong> (or something similar).<\/li>\n
  2. Create a new SwiftUI file. Name it exactly MapView<\/strong> \u2014 spelling and capitalization matter here.<\/li>\n
  3. Replace everything in MapView.swift<\/code> with the code below. Do not modify it yet \u2014 just get it compiling first.<\/li><\/ol>\n\n\n\n
    import SwiftUI\nimport MapKit\n\nstruct MapView: UIViewRepresentable {\n    var thelat = Double()\n    var thelong = Double()\n    var pickMap = Int()\n    var whichMap = [MKMapType.standard, MKMapType.hybrid, MKMapType.satellite]\n\n    func makeUIView(context: Context) -> MKMapView {\n        MKMapView(frame: .zero)\n    }\n\n    func updateUIView(_ uiView: MKMapView, context: Context) {\n        let coordinate = CLLocationCoordinate2D(\n            latitude: thelat,\n            longitude: thelong)\n        let span = MKCoordinateSpan(latitudeDelta: 0.0002, longitudeDelta: 0.0002)\n        let region = MKCoordinateRegion(center: coordinate, span: span)\n        uiView.setRegion(region, animated: true)\n        uiView.mapType = whichMap[pickMap]\n    }\n}\n\n#Preview {\n    MapView(thelat: 34.011286, thelong: -116.166868)\n}<\/code><\/pre>\n\n\n\n
    Your Tasks<\/h2>\n\n\n\n
    Task 1: Three sets of three links.<\/strong> In ContentView<\/code>, create 9 navigation links total \u2014 three sets of three, each set pointing to a different real-world location. Each link passes three values to MapView<\/code>: the latitude, the longitude, and a pickMap<\/code> value (0, 1, or 2). Within each set, the three links should display the same location in standard, hybrid, and satellite map views respectively.<\/p>\n\n\n\n
    To find coordinates: open the location in Google Maps in your browser, right-click it, and choose What’s here?<\/em> \u2014 the latitude and longitude appear at the bottom of the screen. Include the negative sign if present.<\/p>\n\n\n\n
    Task 2: Zoom level variables.<\/strong> Add two new variables to MapView<\/code> for latitudeDelta<\/code> and longitudeDelta<\/code> (currently hardcoded to 0.0002<\/code>). Once the variables exist, update your links in ContentView<\/code> to pass different values to them \u2014 so each link can show a different-sized area of the map.<\/p>\n\n\n\n
    Task 3: Navigation title.<\/strong> Add a NavigationView<\/code> to ContentView<\/code> and apply a .navigationTitle<\/code> modifier to each map page so each location is clearly labeled when you navigate to it.<\/p>\n\n\n\n
    Task 4: Styled, extracted links.<\/strong> Style your 9 links to look great, then extract the link styling into a reusable view struct with variables \u2014 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 \u2192 Extract Selection to File<\/em> instead of the old Extract to Subview option. You’ll then need to add import SwiftUI<\/code>, a proper struct declaration, and a var body: some View<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    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: … Continue reading Homework 10: Map it!<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3085","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/3085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/comments?post=3085"}],"version-history":[{"count":18,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/3085\/revisions"}],"predecessor-version":[{"id":4266,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/3085\/revisions\/4266"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/media?parent=3085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}