ドキュメント / セットアップ / iOS / MapLibre

MapLibre セットアップ

MapLibre Native を MapConductor から使う手順です。API キーが不要でいちばん短く始められます。地図の見た目はスタイル JSON の配信元で決まります。

PACKAGE

ios-for-maplibre

API KEY

不要

MIN iOS

15.1

VIEW

MapLibreMapView

ほかのプラットフォームAndroid React

デモを見る店舗マップ · React ↗

前提

Xcode 15 以上

デプロイターゲット iOS 15.1 以上

STEP 01

Swift Package Manager で追加する

Xcode の File > Add Package Dependencies からパッケージ URL を入力します。MapLibre Native SDK は依存関係として自動的に入ります。

Package URLSwift Package Manager

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

Package.swiftSwift

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

STEP 02

スタイルを決める

MapLibre 本体にアカウントもキーもありません。ただしタイルの配信元は自分で決める必要があります。MapTiler などの商用サービスを使う場合、そのキーはスタイル JSON の URL に埋め込む形になります。MapConductor はタイル配信元の認証には関与しません。

ContentView.swiftSwift

// Built-in presets
mapState.mapDesignType = MapLibreDesign.OsmBright
mapState.mapDesignType = MapLibreDesign.OsmBrightJa
mapState.mapDesignType = MapLibreDesign.MapTilerTonerEn
mapState.mapDesignType = MapLibreDesign.DemoTiles

注意

デモ用のスタイルは動作確認のためのものです。本番では自前または商用のタイル配信を使い、提供元が要求する帰属表示を UI に出してください。

STEP 03

位置情報の権限を足す（必要な場合）

位置情報を使う場合は 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()
    }
}

動作確認

ここまで動けば完了

スタイルを指定して地図を出します。タイルが読み込まれ、ズームとパンが効けば完了です。

ContentView.swiftSwiftUI

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 を包んだ型です。自前のスタイルを使うときは同じ型を直接組み立てます。

MapLibreDesign

Notes

DemoTiles

軽量なデモタイル

OsmBright / OsmBrightEn / OsmBrightJa

OSM Bright。ラベルの言語違い

MapTilerTonerEn / MapTilerTonerJa

高コントラストの Toner スタイル

MapTilerBasicEn / MapTilerBasicJa

情報量を落とした Basic スタイル

うまくいかないとき

地図が真っ白のまま

選んだ MapLibreDesign のスタイル JSON URL に到達できるか確認します。
タイルプロバイダを使っている場合、URL に埋め込んだキーが有効か確認します。
デプロイターゲットが iOS 15.1 以上か確認します。

ビルドが通らない

ビルドフォルダーをクリアします（Cmd+Shift+K）。
~/Library/Developer/Xcode/DerivedData を削除して再ビルドします。
Swift Package Manager の依存を更新します。CocoaPods との併用は避けてください。

次に

MapLibreMapView が出たら、他のプロバイダと同じ共通 API でオーバーレイを重ねられます。