I am making a Map view and would like to show a detail view sheet when you tap on each annotation item on the map. The annotations are locations of National Parks. I have a local JSON file that I am using to populate these views. The problem I am having is that every time I tap one of the annotations, it shows the wrong detail view. In fact, it shows the same detail view for every annotation. I need it to bring up the corresponding detail view for that specific National Park. I have attached my code below as well as two images to help you better understand my problem. I am very new to coding, only been at it just over a month so if you have any tips for me I would really appreciate it!
struct MapView: View {
//PROPERTIES
@State private var region: MKCoordinateRegion = {
var mapCoordinates = CLLocationCoordinate2D(latitude: 39.8283, longitude: -98.5795)
var mapZoomLevel = MKCoordinateSpan(latitudeDelta: 60.0, longitudeDelta: 60.0)
var mapRegion = MKCoordinateRegion(center: mapCoordinates, span: mapZoomLevel)
return mapRegion
}()
@State private var isShowingDetailView : Bool = false
var parks : [Park] = Bundle.main.decode("parkInfo.json")
//BODY
var body: some View {
HStack {
Map(coordinateRegion: $region, annotationItems: parks, annotationContent: {
park in
MapAnnotation(coordinate: park.location) {
Button(action: {
self.isShowingDetailView.toggle()
}) {
MapAnnotationView(park: park)
}
.sheet(isPresented: $isShowingDetailView) {
DetailView(park: park)
}
}
})
.edgesIgnoringSafeArea(.top)
} //: HSTACK
}
}
Map View: Tap on annotations to bring up detail view:
Sheet presented after tapping annotation:
