Post not yet marked as solved
Post marked as unsolved with 0 replies, 266 views
Hello
I'm working on a SwiftUI map app and I'm having some issue with coordinates management.
Here is the full explanation:
My goal
Having a Map view on a macOS app created with SwiftUI, which needs both a toolbar and a no status bar, I wants to be able to clic on the map to add an annotation at a user's chosen location.
My issue
The sample code I use works if I have no toolbar and status bar. When I have them, there is an offset in coordinates that I don't understand how to solve.
Sample code
Here is a code with the issue, if you run it you will see mis placed X marker.
So, how can I fix the following sample code to have accurate management of the mouse location when adding an annotation in that context?
import SwiftUI
import MapKit
struct MyPoint: Identifiable {
var id = UUID()
var name: String
var location: CLLocationCoordinate2D
}
struct ContentView: View {
@State var points: [MyPoint] = [MyPoint]()
@State var status: String = ""
var body: some View {
VStack(spacing:0){
MapReader { mapReader in
Map {
ForEach(points) { point in
Annotation(point.name, coordinate: point.location) {
Text("╳")
.font(.largeTitle)
.bold(true)
.foregroundStyle(.red)
}
}
}
.mapControlVisibility(.visible)
.mapStyle(.imagery)
.mapControls({
MapCompass()
MapUserLocationButton()
MapScaleView()
})
.onContinuousHover(coordinateSpace: .local, perform: { phase in
switch phase {
case .active(let cGPoint):
if let coordinates = mapReader.convert(cGPoint, from: .local) {
status = "screen \(cGPoint.x), \(cGPoint.y) - loc \(coordinates.latitude), \(coordinates.longitude)"
} else {
status = ""
}
case .ended:
status = ""
}
})
.onTapGesture(coordinateSpace: .local, perform: { screenCoord in
if let location = mapReader.convert(screenCoord, from: .local) {
points.append(.init(name: "screen click: \(screenCoord.x), \(screenCoord.y)\nloc \(location.latitude), \(location.longitude)", location: location))
}
})
.toolbar {
Text("A toolbar is needed")
}
}
Text(status)
.frame(maxWidth: .infinity)
.background(.red)
.foregroundColor(.white)
}
}
}
Posted
by
ygini.
Last updated
ygini.
.