Map doesn't center after an update of a location (but the marker does)

App Development
1

Hello together,

i do have the following View showing and and marking a given location on a map.

import SwiftUI
import MapKit

struct MapView: View {
    
    var poi: Ballpark?
    
    var body: some View {

        if let poi = poi {
            Map(initialPosition: .region(MKCoordinateRegion(
                center: CLLocationCoordinate2D(latitude: poi.location!.latitude, longitude: poi.location!.longitude),
                span: MKCoordinateSpan(latitudeDelta: 0.02, longitudeDelta: 0.02))))
            {
                Marker("\(poi.name)", systemImage: "mappin", coordinate: CLLocationCoordinate2D(latitude: poi.location!.latitude, longitude: poi.location!.longitude))
            }
            .ignoresSafeArea()
            .mapStyle(.hybrid)
        }
    }
        
}

the coordinates of the ballpark are part of the Ballpark struct

struct Ballpark: Identifiable, Codable, Comparable, Hashable {
    @DocumentID var id: String? = UUID().uuidString  // -> UUID of firestore document
    var name: String
    var street: String
    var nr: Int?
    var ext: String?
    var city: String
    var zip: Int?
    var googleMaps: String
    var category: String?
    var location: GeoPoint? //= Coordinate(latitude: 0.0, longitude: 0.0)
    var imageUrl: String?  
}

i do read the ballpark informations from a firestorm database and the user can choose the requested ballpark. once this is done, the Form-View should show the position of the ballpark centered in the Map-View.

Th interesting thing is, that after selecting a new ballpark, the marker changes, but the view does not center to the new location. So the new location coordinates are passed into the MapView(). Does anyone of you has any idea, what’s wrong?

@State private var stadium: Ballpark?

Form {
Section(header: Text("Select Your Home Ballpark")) {
                        Picker ("Ballpark", selection: $stadium) {
                            if stadium == nil {
                                Text("select ballpark").tag(Optional<Ballpark>(nil))
                            }
                            ForEach(model.ballparks.sorted()) { arg in
                                Text(arg.name).tag(Optional(arg))
                            }
                        }
                        .pickerStyle(.menu)
                    }

    MapView(poi: stadium)
                        .cornerRadius(10)
                        .padding(.all)
}

the whole code is way too much and too complex, therefore I just add the screenshots of my app.

Start situation:

Simulator Screenshot - iPad (10th generation) - 2024-01-14 at 13.09.27
Simulator Screenshot - iPad (10th generation) - 2024-01-14 at 13.09.271920×1334 179 KB

select new ballpark:

Simulator Screenshot - iPad (10th generation) - 2024-01-14 at 13.09.55
Simulator Screenshot - iPad (10th generation) - 2024-01-14 at 13.09.551920×1334 161 KB

after selection: marker changed, but map didn’t center to new position

Simulator Screenshot - iPad (10th generation) - 2024-01-14 at 13.10.04
Simulator Screenshot - iPad (10th generation) - 2024-01-14 at 13.10.041920×1334 178 KB

Thanks and best regards

Peter

2

How are you telling your map to change its position?

3

… by changing the center location with the new poi (point of interest). But I’m not sure, if this is the correct way. The marker obviously changes it’s position.

4

Have a look at this code and see if there is anything that might help you.

import SwiftUI
import MapKit

struct ContentView: View {
    @State private var textEntry = ""
    @State private var location = CLLocationCoordinate2D()
    @State private var locationName = ""
    @State private var position = MapCameraPosition.camera(MapCamera.init(centerCoordinate: CLLocationCoordinate2D(latitude: -31.953512, longitude: 115.857048), distance: 100000))

    var body: some View {
        VStack {
            VStack {

                HStack {
                    Text("Home Club")
                    Spacer()
                    Picker("Data", selection: $textEntry) {
                        Text("London")
                        Text("Perth")
                    }
                }
                HStack {
                    Text("Home Ballpark")
                    Spacer()
                    Picker("Data", selection: $textEntry) {
                        Text("London")
                        Text("Perth")
                    }
                }
                    Button(action: {
                        position = MapCameraPosition.camera(MapCamera.init(centerCoordinate: CLLocationCoordinate2D(latitude: 51.509865, longitude: -0.118092), distance: 100000))
                        location = CLLocationCoordinate2D(latitude: 51.509865, longitude: -0.118092)
                        locationName = "London"

                    }, label: {
                        Text("Change location")
                    })


            }
            Spacer()
            Map(position: $position) {
                Marker("\(locationName)", systemImage: "mappin", coordinate: location)

            }
            .onAppear {
                location = CLLocationCoordinate2D(latitude: -31.953512, longitude: 115.857048)
                locationName = "Perth"
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}
1 Like
5

Chris, thanks a lot. I could make it work as desired!

1 Like