mapkit

개발 과정

요약

• 최대한 SwiftUI 를 활용하고자 했으나 좋은 기능(?) 들은 iOS 17.0 버전 이상부터 가능한 것들이 많았고, iOS 17.0 버전 아래의 SwiftUI 에서의 MapKit 구현은 제약이 많았습니다. 그러하여 UIKit 을 사용하되 최대한 SwiftUI 와 호환되도록 UIViewRepresentable 를 사용하여 Map 을 구현하였습니다.

iOS 17.0 이상

선택하지 않은 이유

• iOS 17.0 버전으로 높은 버전에서만 호환이 가능하여 추후 안정화 되었을 때 적용하는 것이 좋을 듯 합니다.

주요기능

• position: MapCameraPosition 로 지도 화면 조정 가능
• Map(position: $position) { 처럼 중괄호를 열어 Map 에 넣을 요소들을 SwiftUI 만으로 관리 가능'

struct MapView_iOS17: View {
    
    @State private var position: MapCameraPosition = .camera(.init(centerCoordinate: .duckRun, distance: 1800.0, heading: -80.0))
    
    var body: some View {
        Map(position: $position) {
            UserAnnotation()
            Annotation("오리런", coordinate: .duckRun) {
                ZStack {
                    RoundedRectangle(cornerRadius: 10, style: .continuous)
                        .foregroundStyle(.yellow)
                    Image("duck")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 30)
                        .padding(5)
                }
            }
        }
...

iOS 17.0 이하

선택하지 않은 이유

• iOS 17.0 이전버전에서 지원되는 MapKit 은 제약이 너무 많습니다.
  • Map Rotation 을 지원하지 않습니다. 사용자가 자유롭게 맵을 조작할 수 없습니다.
  • userTrackingMode 와 MKPolyline 쪽에서 제한이 많습니다.
• 복잡한 변수 관리
  • UIKit 수준으로 관리해야 할 변수가 너무 많고 이름이 깁니다.
• 물론 조금더 digging 해보면 방법이 있겠지만 결국 UIKit 을 혼용해서 사용해야 할 것이라는 결론에 다다랐습니다.

주요기능

    // 17.0 에서는 MapCameraPosition 에 해당하는 부분 
    @State private var camera = MKMapCamera(lookingAtCenter: .duckRun, fromDistance: 1800, pitch: 0, heading: -80)

    // Annotation 을 위한 변수
    let duckRunPoints = [
        RunPoint(title: "오리런", coordinate: .duckRun, image: "duck"),
        RunPoint(title: "스타트 포인트", coordinate: CLLocationCoordinate2D(latitude: 37.53958, longitude: 127.07435), image: "startpoint")
    ]

    var body: some View {
        VStack(spacing: 30) {
            Map(coordinateRegion: $region,
                interactionModes: interactionMode,
                showsUserLocation: true,
                userTrackingMode: $userTracking,
                annotationItems: duckRunPoints,
                annotationContent: { location in
                MapAnnotation(coordinate: location.coordinate) {
                    if location.title == "오리런" {
                        VStack {
                            Image(location.image)
                                .resizable()
                                .scaledToFit()
                                .frame(width: 30)
                            Text(location.title)
                                .font(.caption2)
                                .foregroundStyle(.secondary)
                        }
                    } else {
                        VStack {
                            Image(location.image)
                                .resizable()
                                .scaledToFit()
                                .frame(width: 15)
                            Text(location.title)
                                .font(.system(size: 6))
                                .foregroundStyle(.secondary)
                        }
                    }
                }
            })
...