How to put a button/view on top of the SwiftUI Map?

Code Block 
 import Foundation
 import SwiftUI
 import MapKit
 import CoreLocation
 @main
	 struct TestMapApp: App {
		var body: some Scene {
				WindowGroup {
						MapViewer()
				}
		}
}
struct MapViewer: View {
		@State var cityAnno = [CityMapLocation(title: "Tokyo", subtitle: "Japan", lat: 35.685, lon: 139.7514)]
		@State var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 35.685, longitude: 139.7514),span: MKCoordinateSpan(latitudeDelta: 1.0, longitudeDelta: 1.0))
		
		var body: some View {
				Map(coordinateRegion: $region, annotationItems: cityAnno) { city in
						MapAnnotation(coordinate: city.coordinate) {
								buttonView(cityName: city.title!)
								// tried this, does not work
								// Image(systemName:"dot.circle.and.cursorarrow").foregroundColor(.white).scaleEffect(2.2)
								//	 .onTapGesture { print("----> onTapGesture") }
						}
				}
		}
		func buttonView(cityName: String) -> some View {
				Button(action: {print("----> buttonView action")}) {
						VStack {
								Text(cityName)
								Image(systemName: "dot.circle.and.cursorarrow")
						}.foregroundColor(.red).scaleEffect(1.2)
				}.frame(width: 111, height: 111)
				// tried combinations of these, without success
//				.background(Color.gray).opacity(0.8)
//				.border(Color.white)
//				.contentShape(Rectangle())
//				.clipShape(Rectangle())
//				.zIndex(1)
//				.buttonStyle(PlainButtonStyle())
//				.layoutPriority(1)
//				.allowsHitTesting(true)
//				.onTapGesture {
//						print("----> onTapGesture")
//				}
		}
		}
		class CityMapLocation: NSObject, MKAnnotation, Identifiable {
		var id = UUID().uuidString
		var title: String?
		var subtitle: String?
		dynamic var coordinate: CLLocationCoordinate2D
		
		 init(title: String?, subtitle: String?, lat: Double, lon: Double) {
				self.id = UUID().uuidString
				self.title = title
				self.subtitle = subtitle
				self.coordinate = CLLocationCoordinate2D(latitude: lat, longitude: lon)
		}
		}