Passing Map Coordinates to a UIKit Map and Map Pin - swiftui

Question

I have an app that displays expense entries in a list. Clicking on any entry will display additional information and a map of the transaction location. Each entry contains map coordinates for that particular entry.
I would like to use a UIKit map with the options standard, hybrid, or satellite views. Below is some sample map code that will display the three map types but I need help passing in the coordinates and handling the map pin.
Let me know if you need to see any additional code or have questions about my code. Thanks
struct MapViewUIKit: UIViewRepresentable {
let region: MKCoordinateRegion
let mapType : MKMapType
func makeUIView(context: Context) -> MKMapView {
let mapView = MKMapView()
mapView.setRegion(region, animated: false)
mapView.mapType = mapType
return mapView
}
func updateUIView(_ mapView: MKMapView, context: Context) {
mapView.mapType = mapType
}
}
struct ContentView: View {
#State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 36.15035, longitude: -115.91304) , span: MKCoordinateSpan(latitudeDelta: 0.0005, longitudeDelta: 0.0005))
#State private var mapType: MKMapType = .standard
var body: some View {
ZStack {
MapViewUIKit(region: region, mapType: mapType)
.edgesIgnoringSafeArea(.all)
VStack {
Spacer()
Picker("", selection: $mapType) {
Text("Standard").tag(MKMapType.standard)
Text("Satellite").tag(MKMapType.satellite)
Text("Hybrid").tag(MKMapType.hybrid)
}
.pickerStyle(SegmentedPickerStyle())
.offset(y: -40)
.font(.largeTitle)
}
}
}
}
Below is my current swiftui code with map and map pin showing how the coordinates are passed down to maps. ShowRow is part of logic to display core data entries. Clicking on any entry will bring up additional data and a map.
struct DetailView: View {
var item: CurrTrans // this contains core data entries with coordinates
var coordinate: CLLocationCoordinate2D
var g: GeometryProxy
var body: some View {
VStack {
ShowMap(item: item, coordinate: coordinate)
.frame(width: g.size.width, height: g.size.height * 0.65)
ShowDetail(item: item, g: g) // additional entry info
.padding(.top, g.size.height * 0.05)
}
}
}
struct ShowMap: View {
var coordinate: CLLocationCoordinate2D
var item: CurrTrans
var body: some View {
HStack {
Spacer()
MapView(coordinate: coordinate)
.edgesIgnoringSafeArea(.all)
Spacer()
}
}
}
struct Marker: Identifiable {
let id = UUID()
let location: MapPin // or MapMarker
}
Here in MapView typical UIKit examples hardcode the coordinates in a state parameter. I need to pass in the coordinates dynamically.
struct MapView: View {
var coordinate: CLLocationCoordinate2D
var body: some View {
Map(coordinateRegion: .constant(MKCoordinateRegion(center: coordinate,
span: MKCoordinateSpan(latitudeDelta: 0.005, longitudeDelta: 0.005))),
showsUserLocation: false,
annotationItems: [Marker(location: MapPin(coordinate: coordinate))]) { marker in
marker.location
}
}
}

Answer 1

I'm not showing all the details here. The map type segmented picker is shown slightly below the map so I'm not using a ZStack.
The map type state parameter is stored up a level because I have slightly different versions for portrait and landscape modes.
#State private var mapType: MKMapType = .standard
struct ShowMap: View {
var item: CurrTrans
var coordinate: CLLocationCoordinate2D
var g: GeometryProxy
var mapType: MKMapType
var body: some View {
let span = MKCoordinateSpan(latitudeDelta: 0.005, longitudeDelta: 0.005)
let region = MKCoordinateRegion(center: coordinate, span: span)
MapView(region: region, mapType: mapType, coordinate: coordinate)
.edgesIgnoringSafeArea(.all)
}
}
}
struct MapView: UIViewRepresentable {
let region: MKCoordinateRegion
let mapType : MKMapType
var coordinate: CLLocationCoordinate2D
func makeUIView(context: Context) -> MKMapView {
let mapView = MKMapView()
mapView.setRegion(region, animated: true)
// display a map pin
let annotation = MKPointAnnotation()
annotation.coordinate = coordinate
mapView.addAnnotation(annotation)
mapView.mapType = mapType
return mapView
}
func updateUIView(_ mapView: MKMapView, context: Context) {
mapView.mapType = mapType
}
}
struct ShowDetail: View {
var item: CurrTrans
var g: GeometryProxy
#Binding var mapType: MKMapType
var body: some View {
Picker("", selection: $mapType) { // new to end
Text("Default").tag(MKMapType.standard)
Text("Transit").tag(MKMapType.hybrid)
Text("Satellite").tag(MKMapType.satellite)
}
.pickerStyle(SegmentedPickerStyle())
.offset(y: -35)
.font(.largeTitle)
VStack (alignment: .leading) {
ShowMoreDetails(item: item)
.navigationBarTitle("Transaction Details", displayMode: .inline)
.navigationViewStyle(StackNavigationViewStyle())
}
}
}