Initializing Map from an Observable view model in SwiftUI - swiftui

Question

I'm attempting to implment a Map on a SwiftUI view from a view model. Every example I find online hard codes a coordinate. In my case, I'm initializing a view model with a Codable struct and I have no idea what the coordinate is going to be.
I do not encounter compiler issues when I build the project, but canvas crashes. I've tried closing Xcode, cleaning derived data, etc., but that doesn't seem to resolve it.
Any suggestions re: where my mistake is are greatly appreciated.
class EarthquakeViewModel: ObservableObject {
#Published private(set) var quakeData: Feature
#State var region: MKCoordinateRegion
init(quakeData: Feature) {
self.quakeData = quakeData
let center = CLLocationCoordinate2D(latitude: quakeData.geometry.coordinates[0],
longitude: quakeData.geometry.coordinates[1])
let span = MKCoordinateSpan(latitudeDelta: 1.0, longitudeDelta: 1.0)
region = MKCoordinateRegion(center: center,
span: span)
}
public lazy var title: String = {
quakeData.properties.title
}()
}
This is my ContentView:
struct EarthquakeView: View {
#ObservedObject var viewModel: EarthquakeViewModel
var body: some View {
VStack {
Text(viewModel.title)
// makeMapView()
Map(coordinateRegion: $viewModel.region)
}
}
}
// I tried this, too, but it doesn't work.
extension EarthquakeView {
#ViewBuilder func makeMapView() -> some View {
Map(coordinateRegion: $viewModel.region)
}
}
Update
This is the message from Diagnostics. Cleaning derived data with Xcode closed doesn't seem to resolve it, so I think my issue lies with one of my declarations:
RemoteHumanReadableError: Failed to update preview.
The preview process appears to have crashed.
Error encountered when sending 'render' message to agent.
==================================
| RemoteHumanReadableError: The operation couldn’t be completed. (BSServiceConnectionErrorDomain error 3.)
|
| BSServiceConnectionErrorDomain (3):
| ==BSErrorCodeDescription: OperationFailed
Update 2
I tweaked my data model and added a computed region var off of it, so here's how I'm getting the region now:
extension Feature /* Feature is a Codable struct */ {
var region: MKCoordinateRegion {
let center = CLLocationCoordinate2D(latitude: geometry.coordinates[0],
longitude: geometry.coordinates[1])
let span = MKCoordinateSpan(latitudeDelta: 1.0, longitudeDelta: 1.0)
let region = MKCoordinateRegion(center: center,
span: span)
return region
}
}
At jnpdx's suggestion, I updated the region on my view model to #Published.
class EarthquakeViewModel: ObservableObject {
`#Published private(set) var quakeData: Feature
`#Published var region: MKCoordinateRegion
init(quakeData: Feature) {
self.quakeData = quakeData
region = quakeData.region
}
public lazy var title: String = {
quakeData.properties.title
}()
}
And lastly, my View, as follows:
struct EarthquakeView: View {
#ObservedObject var viewModel: EarthquakeViewModel
#State var region: MKCoordinateRegion
init(viewModel: EarthquakeViewModel) {
self.viewModel = viewModel
_region = State(initialValue: viewModel.region)
}
var body: some View {
VStack {
Text(viewModel.title)
Map(coordinateRegion: $region)
}
}
}
The new error is this. Closing Xcode, rebooting, cleaning derived data, etc. doesn't seem to resolve it, so I am quickly concluding I'm missing something basic:
PreviewUpdateTimedOutError: Updating took more than 5 seconds Updating
a preview from EarthquakeView_Previews in CombineQuake.app (16766)
took more than 5 seconds.
Update 3
Preview initialization:
struct EarthquakeView_Previews: PreviewProvider {
static var previews: some View {
let quakeData = EarthQuakeData(mag: 6.5,
place: "32km W of Sola, Vanuatu",
time: 1388592209000,
updated: 1594407529032,
tz: 660,
url: "https://earthquake.usgs.gov/earthquakes/eventpage/usc000lvb5",
detail: "https://earthquake.usgs.gov/fdsnws/event/1/query?eventid=usc000lvb5&format=geojson",
felt: nil,
cdi: nil,
mmi: nil,
alert: nil,
status: "reviewed",
tsunami: 1,
sig: 650,
net: "us",
code: "c0001vb5",
ids: ",pt14001000,at00myqcls,usc000lvb5,",
sources: "pt,at,us",
types: "cap,geoserve,impact-link,losspager,moment-tensor,nearby-cities,origin,phase-data,shakemap,tectonic-summary",
nst: nil,
dmin: 3.997,
rms: 0.76,
gap: 14.0,
magType: "mww",
type: "earthquake",
title: "M 6.5 - 32km W of Sola, Vanuatu")
let geometry = Geometry(type: "Point",
coordinates: [167.249, -13.8633, 187.0])
let earthquake = Feature(type: "Feature",
properties: quakeData,
geometry: geometry,
id: "usc000lvb5")
let viewModel = EarthquakeViewModel(quakeData: earthquake)
EarthquakeView(viewModel: viewModel)
}
}

Answer 1

If you run this on the simulator rather than the preview, you get a more helpful error:
*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'Invalid Region <center:+167.24900000, -13.86330000 span:+1.00000000, +1.00000000>'
I changed:
let geometry = Geometry(type: "Point",
coordinates: [167.249, -13.8633, 187.0])
to
let geometry = Geometry(type: "Point",
coordinates: [45, 34, 187.0])
and it worked fine.
Your latitude of 167.249 is beyond the bounds of -90 to 90, which is the valid range.