Adding MapAnnotations in SwiftUI 2 not conforming to MapAnnotationProtocol - ios

Question

I'm trying to add all the addresses returned from an API on to a map. Unfortunately the API doesn't return long/lat coordinates but I can retrieve them from the geocodeAddressString which when I place in the List outputs it correctly.
struct Locations: Decodable {
let _id: Int
let streetaddress: String?
let suburb: String?
let state: String?
let postcode: String?
func getCoordinates(handler: #escaping ((CLLocationCoordinate2D) -> Void)) {
if let address = streetaddress, let suburb = suburb, let postcode = postcode, let state = state {
CLGeocoder().geocodeAddressString("\(address) \(suburb), \(state) \(postcode)") { ( placemark, error ) in
handler(placemark?.first?.location?.coordinate ?? CLLocationCoordinate2D())
}
}
}
I have the network call going into a class (so I can use and call the data from other screens):
// minimised info
final class ModelData: ObservableObject {
#Published var locations: [ModelRecord] = []
func getLocationData() {
// call the network
self.locations = locations
}
}
So in my main view I have a map which if I use normally is working okay (without annotations). But when I try to cycle the annotations in from the getCoordinates() function then it says it doesn't conform - which I'm assuming because of the loop in the loop.
struct MapView: View {
#StateObject var mapViewModel = MapViewModel() // loads the map init
#StateObject var modelData = ModelData() // loads the api data
var body: some View {
Map(
coordinateRegion: $mapViewModel.region,
interactionModes: .all,
showsUserLocation: true,
annotationItems: modelData.locations,
annotationContent: { location in
location.getCoordinates() { i in
MapPin(coordinate: i)
}
}
)
.onAppear { modelData. getLocationData() } // load data
}
}
Is there any way to fix this so I can have locations appearing on the map? Everything I've read and watched is all about the reverse (having coordinates and getting address names).

Answer 1

In your code, coordinates are only useful for MapPin (otherwise I imagine you would have created a coordinates property in your Locations struct).
In this case you could create a Pin struct (Identifiable to be able to be used by Map):
struct Pin: Identifiable {
var coordinate: CLLocationCoordinate2D
let id = UUID()
}
Now your View MapView, no longer displays an array of Locations, but an array of Pin. Its State is therefore a [Pin] (1). Which is first empty (we have no coordinates), and which is filled as we get the results of GeoCoder (2).
struct MapView: View {
#State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 48.862725, longitude: 2.287592), span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05))
#StateObject var modelData = ModelData() // loads the api data
#State private var pins: [Pin] = [] // (1)
var body: some View {
Map(
coordinateRegion: $region,
interactionModes: .all,
showsUserLocation: true,
annotationItems: pins,
annotationContent: { pin in
MapPin(coordinate: pin.coordinate)
}
)
.onAppear { modelData.getLocationData() } // load data
.onChange(of: modelData.locations.isEmpty) { _ in
for location in modelData.locations {
location.getCoordinates { coordinate in
print("et voilà !")
pins.append(Pin(coordinate: coordinate)) // (2)
}
}
}
}
}
The struct Locations remains unchanged.
I tested with these data :
final class ModelData: ObservableObject {
#Published var locations: [Locations] = []
func getLocationData() {
DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
self.locations = [.init(_id: 1, streetaddress: "11 rue Vineuse", suburb: "", state: "France", postcode: "75016"), .init(_id: 2, streetaddress: "11 rue Chardin", suburb: "", state: "France", postcode: "75016"), .init(_id: 3, streetaddress: "11 avenue Kléber", suburb: "", state: "France", postcode: "75016")]
}
}
}
EDIT : IOS15
For the first version, I was careful not to modify your Model. But we can now try to do better.
First, we will make sure that Map can take an array of Locations directly. We make Locations identifiable, and we add a coordinate property to it :
struct Locations: Decodable, Identifiable {
let _id: Int
let streetaddress: String?
let suburb: String?
let state: String?
let postcode: String?
var id: Int { _id }
var coordinate: CLLocationCoordinate2D? = nil
private enum CodingKeys: CodingKey {
case _id, streetaddress, suburb, state, postcode
}
}
We take this opportunity to remove the function that uses Geocoder. Rather, it has its place in the class that fetch your data.
So I move it, and I take the opportunity to use async / await. This version will only work with Xcode13 / iOS15:
#available(iOS 15.0, *)
final class ModelData: ObservableObject {
#Published var locations: [Locations] = []
#MainActor
func fetchLocationsWithCoordinates() async {
let locations = await getLocationData()
return await withTaskGroup(of: Locations.self) { group in
for location in locations {
group.async {
await self.updateCoordinate(of: location)
}
}
for await location in group {
self.locations.append(location)
}
}
}
private func updateCoordinate(of location: Locations) async -> Locations {
var newLoc = location
newLoc.coordinate = try? await CLGeocoder().geocodeAddressString(
"\(location.streetaddress ?? "") \(location.suburb ?? ""), \(location.state ?? "") \(location.postcode ?? "")"
).first?.location?.coordinate
//await Task.sleep(1_000_000_000)
return newLoc
}
private func getLocationData() async -> [Locations] {
//await Task.sleep(4_000_000_000)
return [.init(_id: 1, streetaddress: "11 rue Vineuse", suburb: "", state: "France", postcode: "75016"), .init(_id: 2, streetaddress: "11 rue Chardin", suburb: "", state: "France", postcode: "75016"), .init(_id: 3, streetaddress: "11 avenue Kléber", suburb: "", state: "France", postcode: "75016")]
}
}
Now in the View, I can call the function that retrieves the Locations and their coordinates, with the .task() modifier.
#available(iOS 15.0, *)
struct SwiftUIView15: View {
#State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 48.862725, longitude: 2.287592), span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05))
#StateObject var modelData = ModelData() // loads the api data
var body: some View {
Map(
coordinateRegion: $region,
interactionModes: .all,
showsUserLocation: true,
annotationItems: modelData.locations,
annotationContent: { pin in
MapPin(coordinate: pin.coordinate ?? CLLocationCoordinate2D())
}
)
.task {
await modelData.fetchLocationsWithCoordinates()
}
}
}
It's cleaner.