MapLibre セットアップ

このセクションでは、MapConductor と MapLibre SDK を統合するセットアップ手順について説明します。

プロプライエタリな API キーなしにオープンソースのマップレンダラーが必要な場合や、MapLibreDesign を使って独自のマップタイルをホストしたい場合にこのプロバイダーを使用してください。

前提条件

• iOS 開発環境（Xcode 15 以上）
• iOS デプロイターゲットが 15.0 以上に設定されていること

MapLibre はオープンソースであり、基本的なマップ表示にはアカウントや API キーは必要ありません。 MapTiler などのタイルプロバイダーを使用する場合は、スタイル JSON の URL に埋め込まれた形でそのプロバイダーの API キーが別途必要になります。MapConductor 自体はタイルプロバイダーの認証を処理しません。

セットアップ手順

1. Swift Package Manager の設定

Xcode プロジェクトに MapConductorForMapLibre を追加します：

1. Xcode で File > Add Package Dependencies に移動します
2. パッケージ URL を入力します：
   • https://github.com/MapConductor/ios-for-maplibre

MapLibre Native SDK は依存関係として自動的にインストールされます。追加のパッケージは必要ありません。

2. 位置情報の権限を追加する（必要な場合）

アプリが位置情報サービスを使用する場合、Info.plist に以下のキーを追加します：

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

動作確認

以下のコードでアプリをビルドして実行し、セットアップを確認します：

import SwiftUI
import MapConductorCore
import MapConductorForMapLibre

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

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

エラーなくマップが表示されれば、セットアップは正常に完了しています。基本的な操作（ズーム、パン）をテストして、すべてが正常に機能していることを確認してください。

トラブルシューティング

よくある問題

マップが表示されない（空白画面）

• 選択した MapLibreDesign のスタイル JSON URL に到達できることを確認してください
• タイルプロバイダー（MapTiler など）を使用している場合は、スタイル URL に埋め込まれた API キーが有効であることを確認してください
• iOS デプロイターゲットが 15.0 以上に設定されていることを確認してください

ビルドエラー

• ビルドフォルダーをクリアします（Cmd+Shift+K）
• 派生データを削除します: ~/Library/Developer/Xcode/DerivedData
• プロジェクトを再ビルドします

位置情報サービス

位置情報ベースの機能を有効にするには、Info.plist に位置情報の権限を追加し（手順 2 を参照）、アプリ内で許可リクエストを行います：

import CoreLocation

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

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

マップスタイル

MapLibreDesign の静的プリセットを使ってマップスタイルを設定します：

// OpenStreetMap Bright（英語）
mapState.mapDesignType = MapLibreDesign.OsmBright

// OpenStreetMap Bright（日本語）
mapState.mapDesignType = MapLibreDesign.OsmBrightJa

// MapTiler Toner（英語）
mapState.mapDesignType = MapLibreDesign.MapTilerTonerEn

// 軽量デモタイル
mapState.mapDesignType = MapLibreDesign.DemoTiles

カスタムスタイルには MapLibreDesign を直接構築します：

let custom = MapLibreDesign(
    id: "custom",
    styleJsonURL: "https://example.com/style.json"
)
mapState.mapDesignType = custom

次のステップ

MapLibre SDK が正しく設定されたら、マップビューコンポーネントのドキュメント に記載されているように MapLibreMapView を使用できます。

その他のサンプルについては、はじめる チュートリアルを参照してください。