Homework 10: Map it!

In this exercise your job is to create a series of links to a map page (struct), drawing on the map portion of the Apple exercise. You will pass Latitudinal and Longitudinal values from each link so that the map updates on a new location from each click. This movie demonstrates the final product except that you will need a total of 9 buttons that lead to three separate locations. If you need a refresher on how navigation links should be structured, click here.

1. Create a new project named MapProject or something similar.
2. Create a new SwiftUI file and (don’t screw this up) name it MapView.
3. Replace everything in MapView.swift with the code below.

   import SwiftUI
   import MapKit
   
   struct MapView: UIViewRepresentable {
   var thelat = Double()
   var thelong = Double()
   var pickMap = Int()
   var whichMap = [MKMapType.satelliteFlyover, MKMapType.satellite, MKMapType.standard]
   
   
   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]
   }
   
   }
   
   
   struct MapView_Previews: PreviewProvider {
   static var previews: some View {
   MapView(thelat: 34.011286, thelong: -116.166868)
   }
   }
   

4. Your first task is to create three sets of three links, from ContentView. swift to MapView.swift that load three separate locations.
   1. Each link will send 3 variables to the MapView struct that will tell it which location to load and, via the pickMap variable, which type of map to display.
   2. Each SET of links will load the same location but the first link will present the ‘standard’ map, the second link a satellite map, and the third link a satelliteFlyover that theoretically includes movement, although that feature stopped working a while back for some reason!
   3. In order to get the latitude and longitude of a give location, find it on Google Maps via your web browser. Right-click on the location that you want and choose “What’s Here?” from the menu that appears. Then copy the latitude and longitude from the little box at the bottom of your browser window. Be sure and get the negative sign if there is one!

      

5. Your second task is to create two new variables in MapView for the latitudeDelta and longitudeDelta values that set the amount of territory that the map shows. Once the variables exist, modify your links in ContentView so that they change the latitudeDelta and longitudeDelta values in order to display different sized areas.
6. Your fourth and final task is to make those links look good and to base their styling on an extracted view. Remember those from way back in late August? The ones where you style one element such as a link nicely, command click to extract the view, and then create variables from the extracted view (a struct) that allows you to easily style additional elements? If not, re-visit chapter 4 in your textbook and find the section on extracting a view.