How can I make a pannable, zoomable View like the one on Apple Maps?

I'm trying to make a View that I can zoom in and out of and pan in all directions, much like the one on Maps by Apple.

I've tried using ScrollView([.vertical, .horizontal]) for the panning, and some code to make the zooming sort-of work (in the code below). During testing, the panning won't work when zoomed in and even the zooming isn't very well made.

import SwiftUI

struct PanAndZoom: View {
    @State var currentZoom: Double = 0
    @State var finalZoom: Double = 0
    var zoom: Double {
        max(min(currentZoom + finalZoom + 1, 5), 0.1)
    }
    var body: some View {
        ScrollView([.horizontal, .vertical]) {
            Group {
                Image("sampleImage")
            }
            .scaleEffect(zoom)
        }
        .gesture(
            MagnificationGesture()
                .onChanged { value in
                    currentZoom = value * 0.5 - 1
                }
                .onEnded { _ in
                    finalZoom += currentZoom
                    currentZoom = 0
                }
        )
    }
}

struct PanAndZoom_Previews: PreviewProvider {
    static var previews: some View {
        PanAndZoom()
    }
}

If anyone could tell me how to achieve anything here or even just guide me in the right direction, that would be greatly appreciated! - I'm a bit of a newbie to SwiftUI! 😅

You can use UIkit widgets using uiViewRepresentable. i am attaching some code that might help you out.

import SwiftUI
import UIKit
struct ImageModifier: ViewModifier {
private var contentSize: CGSize
private var min: CGFloat = 1.0
private var max: CGFloat = 3.0
@State var currentScale: CGFloat = 1.0
init(contentSize: CGSize) {
self.contentSize = contentSize
}
var doubleTapGesture: some Gesture {
TapGesture(count: 2).onEnded {
if currentScale <= min { currentScale = max } else
if currentScale >= max { currentScale = min } else {
currentScale = ((max - min) * 0.5 + min) < currentScale ? max : min
}
}
}
func body(content: Content) -> some View {
ScrollView([.horizontal, .vertical]) {
content
.frame(width: contentSize.width * currentScale, height: contentSize.height * currentScale, alignment: .center)
.modifier(PinchToZoom(minScale: min, maxScale: max, scale: $currentScale))
}
.gesture(doubleTapGesture)
.animation(.easeInOut, value: currentScale)
}
}
class PinchZoomView: UIView {
let minScale: CGFloat
let maxScale: CGFloat
var isPinching: Bool = false
var scale: CGFloat = 1.0
let scaleChange: (CGFloat) -> Void
init(minScale: CGFloat,
maxScale: CGFloat,
currentScale: CGFloat,
scaleChange: @escaping (CGFloat) -> Void) {
self.minScale = minScale
self.maxScale = maxScale
self.scale = currentScale
self.scaleChange = scaleChange
super.init(frame: .zero)
let pinchGesture = UIPinchGestureRecognizer(target: self, action: #selector(pinch(gesture:)))
pinchGesture.cancelsTouchesInView = false
addGestureRecognizer(pinchGesture)
}
required init?(coder: NSCoder) {
fatalError()
}
@objc private func pinch(gesture: UIPinchGestureRecognizer) {
switch gesture.state {
case .began:
isPinching = true
case .changed, .ended:
if gesture.scale <= minScale {
scale = minScale
} else if gesture.scale >= maxScale {
scale = maxScale
} else {
scale = gesture.scale
}
scaleChange(scale)
case .cancelled, .failed:
isPinching = false
scale = 1.0
default:
break
}
}
}
struct PinchZoom: UIViewRepresentable {
let minScale: CGFloat
let maxScale: CGFloat
@Binding var scale: CGFloat
@Binding var isPinching: Bool
func makeUIView(context: Context) -> PinchZoomView {
let pinchZoomView = PinchZoomView(minScale: minScale, maxScale: maxScale, currentScale: scale, scaleChange: { scale = $0 })
return pinchZoomView
}
func updateUIView(_ pageControl: PinchZoomView, context: Context) { }
}
struct PinchToZoom: ViewModifier {
let minScale: CGFloat
let maxScale: CGFloat
@Binding var scale: CGFloat
@State var anchor: UnitPoint = .center
@State var isPinching: Bool = false
func body(content: Content) -> some View {
content
.scaleEffect(scale, anchor: anchor)
.animation(.spring(), value: isPinching)
.overlay(PinchZoom(minScale: minScale, maxScale: maxScale, scale: $scale, isPinching: $isPinching))
}
}

after that you just need to call this code like this

import SwiftUI
struct yourView: View {
var body: some View {
GeometryReader { geoMetryProxy in
Image("yourImage")
.resizable()
.frame(width: geoMetryProxy.size.width, height: geoMetryProxy.size.height)
.scaledToFit()
.clipShape(Rectangle())
.modifier(ImageModifier(contentSize: CGSize(width: proxy.size.width, height: proxy.size.height)))
}
}
}