Mapbox

Vue3 + TypeScript で Mapbox GL JS を使って マップ を表示する サンプル

by

Vue3 + TypeScript で Mapbox の マップ を表示する サンプル を紹介します。 create-vue で作成した プロジェクト に Mapbox の 公式 JavaScript クライアント ライブラリである Mapbox GL JS を組み入れることで 簡単に マップ を実装することができます。 一方で Vue3 + TypeScript 環境向けの サンプル はあまり見受けられません。 多少 コツ のようなものも必要でしたので、 本記事で合わせて紹介していきます。 macOS: 12.3 vue: 3.2.31 typescript: 4.5.5 mapbox-gl: 2.7.1 @type/mapbox-gl: 2.6.3 Vue3 + TypeScript プロジェクト の作成 それでは最初に 今回使用する Vue3 + TypeScript の プロジェクト を以下の要領で作成します。 create-vue で プロジェクト 作成 TypeScript のみ追加 なお プロジェクト 作成の詳細は以下の記事を参考にしてください。 Mapbox GL JS の インストール mapbox-gl の インストール 次に 作成した プロジェクト に Mapbox GL JS を 公式 サイト の手順 に従って インストール していきます。 以下の ように npm install コマンド を実行します。 無事 インストール が完了したら、 package.json に 以下のように mapbox-gl が追加されていることを確認することができます。 Type/mapbox-gl の インストール 次に … Read more

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

by
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

by

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

by

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 を用いて実装する – 実装編

by

前回の記事 で環境準備が整いましたので、早速 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 を用いて実装する – 環境準備編

by

こちらの記事 で 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