I am working on a MapView with MapAnnotation on the Map and am having difficulty getting the MapAnnotation to function properly when selected. In my code, I want the MapAnnotation selected to be to the front if it is behind or partially blocked by another annotation. I have tried using a zIndex but this does not appear to work. Below is my MapView code along with a screenshot of the issue. Any help would be greatly appreciated.
struct HospitalMapView: View {
@StateObject var viewModel = HospitalViewModel()
@State private var showSearchView = false
@State private var showListView = false
@State private var selectedTab: Int = 0
var body: some View {
ZStack {
VStack(spacing: 0) {
TopTabView()
// Map that updates the visible hospitals when the user moves or adjusts the map
Map(coordinateRegion: $viewModel.region, interactionModes: .all, annotationItems: viewModel.filteredHospitals) { hospital in
MapAnnotation(coordinate: CLLocationCoordinate2D(latitude: hospital.latitude, longitude: hospital.longitude)) {
RoundedRectangle(cornerRadius: 40)
.fill(viewModel.colorForPercentile(viewModel.calculatePercentile(for: hospital, in: viewModel.filteredHospitals)))
.frame(width: 70, height: 30) // Maintain consistent size, adjust if necessary
.overlay(
Text("$\(Int(hospital.baseCharge / 1000))K")
.foregroundColor(.white)
.bold()
)
.overlay(
RoundedRectangle(cornerRadius: 40)
.stroke(Color.blue, lineWidth: viewModel.selectedHospital == hospital ? 3 : 0)
)
.onTapGesture {
viewModel.selectHospital(hospital)
// Move the selected hospital to the end of the list to bring it to the front
viewModel.bringHospitalToFront(hospital)
viewModel.showBottomSheet = true
}
.scaleEffect(viewModel.selectedHospital == hospital ? 1.1 : 1.0) // Highlight the selected hospital
.zIndex(viewModel.selectedHospital == hospital ? 1 : 0) // Set the zIndex higher for the selected hospital
.animation(.easeInOut, value: viewModel.selectedHospital) // Smooth transition
}
}
.onAppear {
// Initial update of visible hospitals when the map appears
viewModel.updateFilteredHospitals()
}
.onChange(of: viewModel.region) { _ in
// Update the visible hospitals as the user changes the map region
viewModel.updateFilteredHospitals()
}
.edgesIgnoringSafeArea(.all)
}
// Hospital count display hovering over the map
Text("\(viewModel.filteredHospitals.count) Hospitals")
.font(.subheadline)
.foregroundColor(.white)
.padding(8)
.background(Color.black.opacity(0.6))
.cornerRadius(10)
.padding(.top, -315) // Adjust padding to position correctly below the TopTabView
.zIndex(1) // Ensure it's above the map
if let selectedHospital = viewModel.selectedHospital, viewModel.showBottomSheet {
BottomSheetView(isOpen: $viewModel.showBottomSheet, maxHeight: UIScreen.main.bounds.height * 0.3) {
SummaryTabView(selectedHospital: Binding(
get: { selectedHospital },
set: { newValue in viewModel.selectHospital(newValue) }
))
}
.transition(.move(edge: .bottom))
.animation(.spring())
}
}
.safeAreaInset(edge: .bottom) {
BottomTabView(selectedTab: $selectedTab, showListView: $showListView, showSearchView: $showSearchView,
onSearchSelected: {
showSearchView = true
showListView = false
}, onHomeSelected: {
showSearchView = false
showListView = false
}, onListSelected: {
showListView = true
showSearchView = false
})
}
.fullScreenCover(isPresented: $showSearchView) {
SearchView(viewModel: viewModel, showSearchView: $showSearchView, selectedTab: $selectedTab, showListView: $showListView)
}
.fullScreenCover(isPresented: $showListView) {
ListView(selectedTab: $selectedTab, showListView: $showListView, showSearchView: $showSearchView)
.environmentObject(viewModel)
}
.environmentObject(viewModel)
}
}