Semi-transparent circle on top of map in SwiftUI

Question

I am building an app in SwiftUI and am really running into a slight inconvenience. I am using MapKit to create a map where certain locations get a pin on them. I created a slider to zoom to a region within a certain radius. However for users it would be handy to see a semi-transparent circle that indicates what lays within their given radius. I already tried the following

Circle()
.fill(Color.blue)
.frame(width: geo.size.width, height: geo.size.height)
.opacity(0.15)
.allowsHitTesting(false)

, however after i added the.allowsHitTesting(false), I am still unable to tap the the pins. When i get rid of the circle it works again. Perhaps i am missing something or there is another fix for this problem.

Here is my full body for extra context:

GeometryReader{ geo in
            ZStack{
                Map(coordinateRegion: $region, interactionModes: [], showsUserLocation: true, annotationItems: GPsNear, annotationContent: { pin in
                    MapAnnotation(coordinate: pin.coordinate,
                                  content: {
                                    PinButtonView(pin: pin)
                                  })
                })
                .edgesIgnoringSafeArea(.all)
                .onAppear(perform: askForPermission)
                
//                Circle()
//                    .fill(Color.blue)
//                    .frame(width: geo.size.width, height: geo.size.height)
//                    .opacity(0.15)
//                    .allowsHitTesting(false)
                
                VStack{
                    Slider(
                        value: Binding(get: {
                            self.regionSpan * 100
                        }, set: { (newVal) in
                            self.regionSpan = (newVal / 100)
                            self.sliderChanged()
                        }),
                        in: 0.9...45.045,
                        step: 1,
                        onEditingChanged: { editing in
                            isEditing = editing
                        },
                        minimumValueLabel: Text("1"),
                        maximumValueLabel: Text("25 km")
                    ) {
                        Text("Radius")
                    }.padding()
                    Spacer()
                }
            }
        }

And the PinButtonView as well:

Button(action: {
            showingDetailScreen.toggle()
        }) {
            Image(systemName: "mappin")
                .padding()
                .foregroundColor(.red)
                .font(.title)
        }
        .actionSheet(isPresented: $showingDetailScreen){
            ActionSheet(title: Text(pin.name), buttons: [
                .default(Text("Call practitioner")) {
                    callNumber()
                },
                .default(Text("Visit website")) { visitSite() },
                .cancel()
            ])
        }

Does anyone have a solution for this, I look forward to see any answers.

Answer 1

You need to use.overlay with.allowsHitTesting(false).

ZStack{
Map(coordinateRegion: $region, interactionModes: [], showsUserLocation: true, annotationItems: GPsNear, annotationContent: { pin in
    MapAnnotation(coordinate: pin.coordinate,
                  content: {
                    PinButtonView(pin: pin)
                  })
})
.edgesIgnoringSafeArea(.all)
.onAppear(perform: askForPermission)
.overlay(
    Circle()
        .fill(Color.blue)
        .frame(width: geo.size.width, height: geo.size.height)
        .opacity(0.15)
)
.allowsHitTesting(false)

VStack{
 //// Rest of the code