[swift] Mapbox SDK와 스위프트UI의 연동 방법

29 Nov 2023

swift

Mapbox SDK와 SwiftUI

Mapbox SDK는 지도 기반 애플리케이션을 개발할 때 사용되는 도구입니다. SwiftUI는 iOS 애플리케이션을 빌드하기 위한 새로운 사용자 인터페이스 프레임워크입니다. 이 두 가지를 함께 사용하여 Mapbox 지도를 SwiftUI 앱에 통합할 수 있습니다.

Mapbox SDK 설치

먼저, Mapbox SDK를 프로젝트에 추가해야 합니다. CocoaPods를 사용하여 설치할 수 있습니다. 프로젝트의 Podfile에 아래와 같이 추가합니다.

target 'YourProjectName' do
  use_frameworks!
  
  pod 'Mapbox-iOS-SDK', '~> 6.0'
end

그리고 터미널에서 아래 명령어를 실행하여 CocoaPods를 설치합니다.

$ pod install

Mapbox 맵 뷰 생성하기

Mapbox 맵 뷰를 생성하기 위해, UIViewRepresentable 프로토콜을 준수하는 SwiftUI View를 만들어야 합니다. 이 프로토콜을 확장한 MapboxMapView 구조체를 만들어보겠습니다.

import SwiftUI
import Mapbox

struct MapboxMapView: UIViewRepresentable {
    typealias UIViewType = MGLMapView

    func makeUIView(context: Context) -> MGLMapView {
        let mapView = MGLMapView(frame: .zero)
        return mapView
    }

    func updateUIView(_ uiView: MGLMapView, context: Context) {
        // Mapbox Map View 업데이트 로직 구현
    }
}

맵 뷰에 사용자 위치 표시하기

맵 뷰에 사용자 위치를 표시하기 위해, MGLMapViewDelegate 프로토콜을 구현해야 합니다. 이 프로토콜 메서드에서 사용자 위치를 설정할 수 있습니다. MapboxMapView 구조체에 delegate를 설정하고 사용자 위치를 표시하는 메서드를 구현해보겠습니다.

import SwiftUI
import Mapbox

struct MapboxMapView: UIViewRepresentable {
    typealias UIViewType = MGLMapView

    func makeUIView(context: Context) -> MGLMapView {
        let mapView = MGLMapView(frame: .zero)
        mapView.delegate = context.coordinator
        return mapView
    }

    func updateUIView(_ uiView: MGLMapView, context: Context) {
        // Mapbox Map View 업데이트 로직 구현
    }

    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    
    class Coordinator: NSObject, MGLMapViewDelegate {
        func mapViewDidFinishLoadingMap(_ mapView: MGLMapView) {
            mapView.showsUserLocation = true
        }
    }
}

맵 뷰에 마커 추가하기

맵 뷰에 마커(Annotation)를 추가하기 위해, MGLPointAnnotation 객체를 생성하고 원하는 위치와 텍스트를 설정해야 합니다. MapboxMapView 구조체의 updateUIView 메서드에서 마커를 추가하는 코드를 작성해보겠습니다.

import SwiftUI
import Mapbox

struct MapboxMapView: UIViewRepresentable {
    typealias UIViewType = MGLMapView

    // ...

    func updateUIView(_ uiView: MGLMapView, context: Context) {
        let annotation = MGLPointAnnotation()
        annotation.coordinate = CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194)
        annotation.title = "San Francisco"
        
        uiView.addAnnotation(annotation)
    }
    
    // ...
}

종합 예제 코드

아래는 Mapbox SDK와 SwiftUI를 사용하여 맵 뷰를 생성하고 사용자 위치를 표시하며 마커를 추가하는 종합적인 예제 코드입니다.

import SwiftUI
import Mapbox

struct ContentView: View {
    var body: some View {
        MapboxMapView()
    }
}

struct MapboxMapView: UIViewRepresentable {
    typealias UIViewType = MGLMapView

    func makeUIView(context: Context) -> MGLMapView {
        let mapView = MGLMapView(frame: .zero)
        mapView.delegate = context.coordinator
        return mapView
    }

    func updateUIView(_ uiView: MGLMapView, context: Context) {
        let annotation = MGLPointAnnotation()
        annotation.coordinate = CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194)
        annotation.title = "San Francisco"
        
        uiView.showsUserLocation = true
        uiView.addAnnotation(annotation)
    }

    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    
    class Coordinator: NSObject, MGLMapViewDelegate {
        func mapViewDidFinishLoadingMap(_ mapView: MGLMapView) {
            // 맵 로딩 완료 시 필요한 로직 수행
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

이제 위의 코드를 참고하여 Mapbox SDK와 SwiftUI를 함께 사용하여 원하는 기능을 구현할 수 있습니다.

목차