swiftmapkit

Annotation with image are not at the right place when showing it in the map


I recently post a question about having clickable marker on a map thanks to annotations here.

With the popup, the annotation is never at the right position, which make the shadow be at different location and so we can't click on it.

For example, here there is 3 different locations :

enter image description here

When I zoom:

enter image description here

I tried zooming and dezooming and you can see the annotations is doing strange things, and no point stay at the right place (they all should be in France).

Here is my code

Map(position: .constant(.automatic)) {
    ForEach(sessions, id: \.id) { session in
        Annotation("", coordinate: CLLocationCoordinate2D(latitude: session.getLatitude(), longitude: session.getLongitude())) {
            VStack { // this section comes from https://stackoverflow.com/q/79713102/10952503
                VStack(alignment: .leading) {
                    Text("Header")
                        .foregroundStyle(.white).padding(2)
                    Text("Line A")
                    Text("Line B")
                    Text("Line C")
                    Text("Line D")
                }.fixedSize().padding(.horizontal).padding(.bottom).background {
                    VStack(spacing: 0) {
                        Text("X").hidden().frame(maxWidth: .infinity).padding(2).background(Colors.BTN)
                        Rectangle().fill(.background)
                    }
                }.opacity(selected?.SessionId == session.SessionId ? 1 : 0)
                Image(systemName: "mappin")
                    .resizable()
                    .frame(width: 16, height: 32)
                    .foregroundColor(session.getColor())
                    .shadow(radius: 4)
            }.onTapGesture {
                selected = (selected?.SessionId == session.SessionId ? nil : session)
            }
        }
    }
}.mapStyle(.hybrid)

How can I make the annotation be at the right place ?


Solution

  • To fix your zooming problem, try changing your Annotation to

    Annotation("", coordinate: CLLocationCoordinate2D(latitude: session.getLatitude(), longitude: session.getLongitude()), anchor: .bottom) { .... }