[ SwiftUI ][ Mapbox ] iOS アプリ で Mapbox 地図に マーカー ピン を立てる

eye-catch

関連する 前回の記事で SwiftUI を使って iOS 上に Mapbox の地図を表示することができたので、次の ステップ として地図に マーカー (ピン) を立てて、特定の地点を指し示すようにしてみたいと思います。 Xcode: 13.2.1 iOS: 15.2 Swift: 5.5 mapbox-maps-ios: v10.2.0 Mapbox 公式 ドキュメント の説明 Mapbox 公式 ドキュメント には Example として、以下のように コペンハーゲン に マーカー を表示する サンプル が掲載されています。まずは、その サンプル の内容を確認していくことにします。 引用元: https://docs.mapbox.com/ios/maps/examples/point-annotation/ UIViewController 前回の記事同様、 公式 サイト で提供されているのは UIViewController のものですので、 SwiftUI で扱うためには UIViewControllerRepresentable を用いる必要があります。 考え方は前回の記事と同様ですので、詳細については前回の記事を参考にしてください。 MapBox MapView の生成 サンプル で紹介されている ViewController では最初に マップ の中心を指定し、 マップ を生成しています。 ただし、このままでは マップ を表示することができないため、以下のように修正していきます。 ”Your Access Token” には有効な アクセストークン を指定してください。 myResourceOptions として アクセストークンをセット MapInitOptions に resourceOptions パラメータ を追加 ここで、いくつか馴染みの薄そうな アイテム について補足していきます。 CLLocationCoordinate2D CLLocationCoordinate2D は 緯度  と 経度 を パラメータ として生成する位置情報のオブジェクトです。今回の例では マップ の中心座標として利用しています。 MapInitOptions ResourceOptions として accessToken を指定したり、 CameraOptions として 中心座標や縮尺などを指定した マップ 生成時の オプション 用 オブジェクト です。  cameraState … Read more

[SwiftUI] Implement Mapbox Map View with SwiftUI – Create Map View

Since we completed the required environment set up in the previous article, I would like to implement the Mapbox map view with SwiftUI. If you didn’t complete the environment setup yet, please refer to the previous article to proceed with the contents of this article. You may think that the most simple quick start has been provided officially and it will help to create a view just by copy and paste. But unfortunately, it’s not true. Actually, the official site provides the simple sample code to create a map view, however, that code is not compatible with SwiftUI as it is. Therefore,  first of all, I will introduce the UIViewRepresentable … Read more

[SwiftUI] Implement Mapbox Map View with SwiftUI – Preparation

At this time, in the second half of 2021, Apple Map has still not had less functionality with SwiftUI so far. However, we can implement more map functionality with third parties such as Google Maps Platform. But Google Maps Platform has increased its cost so that someone might hesitate to use it because of its higher cost like me. So, I will introduce how to implement the Mapbox which might be a secondary choice of the major map services other than Apple Map. In this article, I would like to introduce the steps as follows to use Maps SDK for iOS which can be utilized with Xcode.  Also, mentions the … Read more

[SwiftUI] Mapbox の地図を Maps SDK for iOS を用いて実装する – 実装編

前回の記事 で環境準備が整いましたので、早速 Mapbox の地図 を SwiftUI で実装していきたいと思います。 Maps SDK for iOS を用いて実装してきますので、 Maps SDK for iOS の インストール ができていない場合は 前回の記事 を参考に インストール した後に本記事を参照ください。 Mapbox 公式 サイト が提供している サンプルコード は そのままでは SwiftUI に組み入れることができないため UIViewRepresentable を活用して実装していますので、 UIViewRepresentable についても簡単に解説しながら進めていきます。 Xcode: 13.2.1 iOS: 15.2 Swift: 5 Maps SDK for iOS: v10.2.0 公式 サイト で紹介されている Maps SDK for iOS サンプル コード Mapbox の公式サイト には 簡単な サンプル が紹介されているのですが、 残念ながら SwiftUI を用いた そのものズバリのものは紹介されておらず、 UIViewController を用いたもののみが紹介されています。 UIViewController は iOS 2.0 以降で実装可能な “枯れた” 技術ではありますが、 SwiftUI で実装するためには UIViewRepresentable を用いてひと手間加える必要があります。 UIViewRepresentable について Apple Developer サイト によると UIViewRepresentable は以下のように紹介されています。 A wrapper for a UIKit view that you use to integrate that view into your SwiftUI view hierarchy. https://developer.apple.com/documentation/swiftui/uiviewrepresentable つまり、iOS 2.0 以降 サポート … Read more

[SwiftUI] Mapbox の地図を Maps SDK for iOS を用いて実装する – 環境準備編

こちらの記事 で SwiftUI を用いて Apple 純正の Map を iOS アプリ で活用する方法を紹介しました。 ただし、 SwiftUI はまだまだ発展途上な部分も多く、 2021 年時点では 実現できることは限られています。 そこで 外部の 地図 サービス である MapBox の Maps SDK for iOS を用い SwiftUI で地図を実装する方法について 「環境準備編」「実装編」の 2 回に分けて説明していきたいと思います。 Xcode: 13.2.1 iOS: 15.2 Swift: 5 Maps SDK for iOS: v10.2.0 環境準備編 では 以下を実施していきます。 Xcode プロジェクト作成 Access Token の作成 Xcode 環境設定 SwiftUI プロジェクト 作成 最初に 本記事で使用する Xcode プロジェクト を作成していきます。プロジェクト 新規作成画面から App を選択し、 “mapbox-sample” という名称で プロジェクト を作成します。  このプロジェクト を使って クイックスタート を進めていきたいと思います。 次に 地図の表示など Mapbox API の各機能 に アクセス するために必要な Access Token を作成してきます。 Mapbox で用いる Access Token の作成 Maps SDK for iOS などの Mapbox SDK を介して Mapbox の各機能を利用する際には 認証情報として Mapbox アカウント に紐付いた Access Token が必要になります。 まずは Access Token について簡単に整理しておきます。 … Read more

SwiftUI で Apple 地図 ( Maps ) を実装する方法 – ピン を 複数 立てる方法 等 –

スマホ アプリ の強みとして「 地図 の表示」や 「場所に ピン を立てること」 が挙げられると思います。 SwiftUI を用いて実装できる 地図 サービス には いくつかの種類がありますが 本記事では Apple 純正の Map を取り上げ、 SwiftUI を用いて 以下を実装する方法について説明していきます。 緯度経度情報を基に 地図 を表示する方法 1 つの ピン を立てる方法 複数 ピン を立てる方法 Xcode: 13.1 iOS: 14.5 Swift: 5 緯度経度を基に 地図 を表示 まずはじめに 緯度経度を基に地図を表示してみたいと思います。 Apple Developer サイト の情報 に従って Apple Park の地図を表示してみます。 MapKit を インポート @State 変数 として MKCoordinateRegion 型の変数 region を作成 MKCoordinateRegion は 以下を引数にもつ 引数 説明 center 中心地点を CLLocationCoordinate2D を 緯度経度 を基に指定 latitudinalMeters 地図に表示する 南北方向の広さを メートル で指定 longitudinalMeters 地図に表示する 東西方向の広さを メートル で指定 Map オブジェクト には 上述した region 変数を引数に指定 ContentView で この View (AppleParkMap) を呼び出す形にして ビルド してみると以下のような結果となります。 コード 上は 東西 南北 共に 750 m としていますが、縦長の画面に表示するため、 南北 750 m として表示されます。 なお … Read more