Search code examples
swiftuiswiftui-navigationlink

SwiftUI: replacing custom map button with a MapPin as a button?


I was using a custom button on a map but I realized now I want to use a normal pin, such as MapPin. How can I change my code to adjust for the use of MapPin so that when I click on it, the same actions take place .

   Map(coordinateRegion: $region, annotationItems: getAnnotated()) { item in
            MapAnnotation(coordinate: item.coordinate) {
                Button(action: {
                    selected.item = item  // <--- here
                    showSheet.toggle()
                }){
                    Image("icon")
                        .resizable()
                        .frame(width: 70, height: 70)
                        .foregroundColor(.white)
                        .cornerRadius(9.0)
                }
                .background(Circle())
                .foregroundColor(Color.green)
            }
        }

I tried swapping out Image() for MapPin() as a last ditch effort but that didn't work.


Solution

  • you could try this:

    Map(coordinateRegion: $region, annotationItems: getAnnotated()) { item in
        MapAnnotation(coordinate: item.coordinate) {
            Button(action: {
                selected.item = item
                showSheet.toggle()
            }){
                Image(systemName: "mappin.and.ellipse")  // <---
                    .scaleEffect(2.0)
                    .foregroundColor(.red)
                    .padding()
            }
            .background(Circle())
            .foregroundColor(Color.clear)  // <---
        }
    }
    

    or "mappin.circle", "mappin"

    and adjust the colors as you see fit.