Hi,
To provide some context on how this view fits into the overall layout: the map is displayed inside an info box that can be swiped away. When no swipe gesture is in progress, the map should remain interactive and allow zoom gestures. While the info box is being swiped, interaction with the map should be disabled. The map always displays at least one marker.
You can find a more complete code example and a screenshot here:
import MapKit
struct ContentView: View {
@State private var offset = CGSize.zero
let position = CLLocationCoordinate2D(latitude: 51.5074, longitude: -0.1278)
let span = MKCoordinateSpan(latitudeDelta: 5.0, longitudeDelta: 5.0)
var body: some View {
ZStack {
let drag = DragGesture()
.onChanged { g in
offset.width = g.translation.width
offset.height = g.translation.height
}
.onEnded{ _ in
withAnimation {
offset = .zero
}
}
VStack(spacing: 0){
Map(initialPosition: .region(MKCoordinateRegion(center: position, span: span)), interactionModes: [.zoom]){
Marker("London", coordinate: position)
}
VStack {
Text("London")
.font(.headline)
Text("Additional Info")
.font(.subheadline)
}
.padding()
}
.clipShape(RoundedRectangle(cornerRadius: 12))
.overlay(
RoundedRectangle(cornerRadius: 12)
.stroke(Color.gray, lineWidth: 2)
)
.frame(width: 300, height: 250)
.offset(x: offset.width, y: offset.height/12)
.rotationEffect(.degrees(Double(offset.width / 12)))
.highPriorityGesture(drag)
}
}
}
Thanks in advance for your help.
Topic:
UI Frameworks
SubTopic:
SwiftUI
Tags: