Mapbox 関連メモ

覚え書き: プロジェクト作成時

• iOS にする ( macOS には対応していないので Multiplatform にはしない )
• Info.plist に MBXAccessToken = pk.***** を登録
• Package Manager で mapbox-maps-ios を読み込み ( 前提: .netrc 設定してあること )

最小サンプル (UIKit)

ViewController.swift

import UIKit
import MapboxMaps

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let mapView = MapView(frame: view.bounds)

        // ★1. スタイルの設定
        mapView.mapboxMap.mapStyle = MapStyle(uri: StyleURI(rawValue: "mapbox://styles/mapbox/standard")!)

        // ★2. カメラの設定
		let center = CLLocationCoordinate2D(latitude: 35.6598, longitude: 139.702389)
		let cameraOptions = CameraOptions(center: center, zoom: 13, bearing: 0, pitch: 0)
		mapView.mapboxMap.setCamera(to: cameraOptions)

        // ★3. リサイズ用の設定
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

        view.addSubview(mapView)
    }
}

• ★1. スタイルの設定
  • standard を設定するなら、省略すれば良いのだけども、
  • Mapbox Studio で作成した Style に置き換えたい場合は、その URL に置き換える
• ★2. カメラの設定
  • center
    • 中心位置
    • 例は渋谷駅周辺に設定した
  • zoom
    • 2 で地球全体が映る、大きいほど拡大。13 ぐらいで地図として見れる
    • 画面幅を基準に決めたいが、この設定値は絶対値のようだ
  • bearing
    • どちらの方角を向いているかを表す。矢印が指す角度を時計回り、のイメージ。基本 0 で良い
    • 360 で 1 周
    • つまり、地図を見る視点で言うと反時計周りに bearing 度 回した状態
  • pitch
    • 鳥瞰図にしたいとき用の設定。基本 0 (真上) で良い
    • 90 に近づくほど水平 (60が最大？)
• ★3. リサイズ用の設定
  • つけておけば、親要素のサイズ変化（回転など）に応じて地図が自動でフィットしてくれるということ

これを SwiftUI から呼ぶ場合

ViewControllerWrapper.swift

import SwiftUI

struct ViewControllerWrapper: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> ViewController {
        return ViewController()
    }

    func updateUIViewController(_ uiViewController: ViewController, context: Context) {
        // 状態更新時に必要なら処理を書く（ここでは空でOK）
    }
}

ContentView.swift

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
		ViewControllerWrapper()
			.ignoresSafeArea()
    }
}

最小サンプル (SwiftUI)

swift

import SwiftUI
import MapboxMaps

struct ContentView: View {
	var body: some View {
		// ★1. スタイルの設定
		let mapStyle = MapStyle(uri: StyleURI(rawValue: "mapbox://styles/mapbox/standard")!)

		// ★2. カメラの設定
		let center = CLLocationCoordinate2D(latitude: 35.6598, longitude: 139.702389)
		let camera = Viewport.camera(center: center, zoom: 13, bearing: 0, pitch: 0)
		Map(initialViewport: camera)
			.mapStyle(mapStyle)
			.ignoresSafeArea()
	}
}