문서 / 설정 / iOS / Mapbox

Mapbox 설정

Mapbox Maps SDK for iOS를 MapConductor에서 쓰는 절차입니다. 이미 Mapbox에 의존하고 있는 앱이나, Mapbox의 스타일 URL이 필요한 경우에 고릅니다.

PACKAGE

ios-for-mapbox

API KEY

액세스 토큰

MIN iOS

17.0

VIEW

MapboxMapView

같은 프로바이더, 다른 플랫폼Android React

데모 보기매장 지도 · React ↗

시작하기 전에

Xcode 15 이상

Mapbox 계정(무료 또는 유료)

퍼블릭 액세스 토큰(maps:read 스코프)

디플로이 타깃 iOS 17.0 이상

STEP 01

액세스 토큰을 취득한다

Mapbox 계정을 만들거나 로그인합니다.
「토큰」에서 기본의 퍼블릭 토큰을 복사합니다.
필요하면 maps:read 스코프를 가진 토큰을 새로 만듭니다.

주의

시크릿 토큰을 앱에 넣지 마세요. 앱에서 쓰는 것은 퍼블릭 토큰입니다.

STEP 02

Swift Package Manager로 추가한다

Xcode의 File > Add Package Dependencies에서 패키지 URL을 입력합니다. Mapbox Maps SDK는 의존 관계로서 자동으로 들어옵니다.

Package URLSwift Package Manager

https://github.com/MapConductor/ios-for-mapbox

Package.swiftSwift

dependencies: [
    .package(url: "https://github.com/MapConductor/ios-sdk-core", from: "1.3.1"),
    .package(url: "https://github.com/MapConductor/ios-for-mapbox", from: "1.0.0"),
],
targets: [
    .target(
        name: "YourApp",
        dependencies: [
            .product(name: "MapConductorCore", package: "ios-sdk-core"),
            .product(name: "MapConductorForMapbox", package: "ios-for-mapbox"),
        ]
    ),
]

STEP 03

SDK를 초기화한다

지도 뷰가 만들어지기 전에 initializeMapbox(accessToken:)을 한 번만 호출합니다.

MyApp.swiftSwift

import SwiftUI
import MapConductorForMapbox

@main
struct MyApp: App {
    init() {
        initializeMapbox(accessToken: "YOUR_MAPBOX_PUBLIC_TOKEN")
    }

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

ContentView.swiftSwift

// Alternative: call it from the view's sdkInitialize closure
MapboxMapView(state: mapState, sdkInitialize: {
    initializeMapbox(accessToken: "YOUR_MAPBOX_PUBLIC_TOKEN")
})

STEP 04

위치 정보의 권한을 더한다(필요한 경우)

위치 정보를 쓰는 경우는 Info.plist에 용도를 씁니다.

Info.plistXML

<key>NSLocationWhenInUseUsageDescription</key>
<string>We need your location to display on the map</string>

LocationManager.swiftSwift

import CoreLocation

final class LocationManager: NSObject, ObservableObject, CLLocationManagerDelegate {
    private let manager = CLLocationManager()

    override init() {
        super.init()
        manager.delegate = self
    }

    func requestPermission() {
        manager.requestWhenInUseAuthorization()
    }
}

동작 확인

여기까지 보이면 완료

Mapbox의 스타일로 지도가 나오고, 줌과 팬이 들으면 완료입니다.

ContentView.swiftSwiftUI

import SwiftUI
import MapConductorCore
import MapConductorForMapbox

struct ContentView: View {
    @StateObject var mapState = MapboxViewState(
        mapDesignType: MapboxMapDesign.Standard,
        cameraPosition: MapCameraPosition(
            position: GeoPoint(latitude: 35.6812, longitude: 139.7671),
            zoom: 12.0
        )
    )

    var body: some View {
        MapboxMapView(state: mapState)
            .ignoresSafeArea()
    }
}

지도 디자인

MapboxMapDesign은 Mapbox의 표준 스타일에 대응합니다. 커스텀 스타일은 MapboxMapDesign.custom(styleURI:)로 지정합니다.

MapboxMapDesign

Notes

Standard

기본의 스탠다드 스타일

Streets

스트리트 스타일

SatelliteStreets

위성 화상＋도로와 라벨

Dark

다크 스타일

잘 안 될 때

지도가 새하얀 채로

initializeMapbox(accessToken:)이 지도 뷰보다 먼저 호출되고 있는지 확인합니다.
토큰에 maps:read 스코프가 있는지 확인합니다.
디플로이 타깃이 iOS 17.0 이상인지 확인합니다.

「무효한 액세스 토큰」이라고 나온다

토큰의 값을 확인하고, 실효되지 않았는지 확인합니다.
시크릿 토큰이 아니라 퍼블릭 토큰을 쓰고 있는지 확인합니다.

빌드가 통과하지 않는다

빌드 폴더를 지웁니다(Cmd+Shift+K).
~/Library/Developer/Xcode/DerivedData를 삭제하고 다시 빌드합니다.
Swift Package Manager의 의존을 갱신합니다. CocoaPods와의 병용은 피해 주세요.

MapboxMapView가 나오면, 다른 프로바이더와 같은 공통 API로 오버레이를 겹칠 수 있습니다.