ドキュメント / セットアップ / iOS / Open Mobile Maps

Open Mobile Maps セットアップ

Open Mobile Maps（maps-core）を MapConductor から使う手順です。Swift Package Manager で入れ、API キーは要りません。

MODULE

MapConductorForOpenMobileMaps

API KEY

不要

VIEW

OpenMobileMapsMapView

TIME

10 分

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

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

前提

Xcode 15 以上

iOS 16.0 以上を対象とするアプリ

STEP 01

パッケージを追加する

maps-core と MapConductor のモジュールを Swift Package Manager で追加します。

Package.swiftSwift

dependencies: [
    .package(url: "https://github.com/openmobilemaps/maps-core", from: "4.0.0"),
    .package(url: "https://github.com/MapConductor/ios-sdk-core", from: "1.3.1"),
    .package(url: "https://github.com/MapConductor/ios-for-openmobilemaps", from: "1.0.0"),
]

STEP 02

タイルの配信元を決める

キーが無いぶん、タイルをどこから取るかは自分で決めることになります。OpenStreetMap の公式タイルサーバーは利用ポリシー上アプリからの常用に向きません。本番では自前配信か商用の配信元を使ってください。

動作確認

ここまで動けば完了

東京を中心に地図を出します。タイルが読み込まれれば完了です。

import SwiftUI
import MapConductorCore
import MapConductorForOpenMobileMaps

struct TestOpenMobileMaps: View {
    @StateObject private var state = OpenMobileMapsViewState(
        cameraPosition: MapCameraPosition(
            position: GeoPoint(latitude: 35.6812, longitude: 139.7671),
            zoom: 11
        )
    )

    var body: some View {
        OpenMobileMapsMapView(state: state)
    }
}

地図デザイン

Notes

OpenStreetMap

OpenStreetMap の標準スタイル

OpenStreetMapJapan

日本向けの表記に寄せたもの

OpenTopoMap

地形図

うまくいかないとき

地図が真っ白で、タイルが 1 枚も来ない

このプロバイダに API キーはありません。まず指定しているスタイル URL に到達できるか確認します。
端末がネットワークに出られるか確認します。

タイル配信元から 429 や 403 が返る

OpenStreetMap の公式タイルサーバーには利用ポリシーがあり、アプリからの常用は想定されていません。本番では自前のタイル配信か、商用の配信元を使ってください。

次に

マーカー・ポリライン・ポリゴン・円・グラウンドイメージ・ラスターレイヤー・InfoBubble は共通 API のまま使えます。