ドキュメント / セットアップ / 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.1.4"),
    .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 でオーバーレイを重ねられます。