以前、「【React Native】「react-native-maps」ライブラリを使ってOpenStreetMapを表示する」という記事で、React Native のアプリに Google Map を表示する方法をご紹介しましたが、今回は Mapbox の地図を表示する方法についてです。
今回導入したライブラリは「@react-native-mapbox-gl/maps」です。
GitHub のページはこちら。
react-native-mapbox-gl/maps: A Mapbox GL react native module for creating custom maps
https://github.com/react-native-mapbox-gl/maps
インストール手順ですが、私はまだ Android にしか導入できていないので、今回は Android での実装方法のみのご紹介です。
まず、下記コマンドを実行してライブラリをインストールします。
npm install @react-native-mapbox-gl/maps --save
次に、android/gradle.properties を開き、下記の1行を追加します。
MAPBOX_DOWNLOADS_TOKEN=[Mapbox のアクセストークン]
なお、トークンは " や ' で囲まないでください。
上記を追加したら、今度は android/build.gradle を開き、下記を追加します。
allprojects {
repositories {
/* ここから */
maven {
url 'https://api.mapbox.com/downloads/v2/releases/maven'
authentication {
basic(BasicAuthentication)
}
credentials {
// Do not change the username below.
// This should always be `mapbox` (not your username).
username = 'mapbox'
// Use the secret token you stored in gradle.properties as the password
password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: ""
}
}
/* ここまで */
}
}
最後に、android/app/build.gradle を開き下記を追加します。
dependencies {
/* ここから */
implementation 'com.mapbox.mapboxsdk:mapbox-android-sdk:9.2.0'
implementation 'com.mapbox.mapboxsdk:mapbox-sdk-services:5.6.0'
implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-annotation-v9:0.9.0'
/* ここまで */
}
なお、GitHub のインストール手順だと、最初の1行目が implementation 'com.mapbox.mapboxsdk:mapbox-android-sdk:9.6.1' となっていましたが、こちらを追加後に Android Studio で Sync Project を行ったところエラーが発生したので、バージョンを 9.2.0 に下げました。
上記まで追加出来たら、Android Studio でプロジェクトを開き、Sync Now を実行してください。
上記の作業が終わったら、プロジェクトに戻り、マップを表示したいページに下記を追加します。
import MapboxGL from "@react-native-mapbox-gl/maps";
MapboxGL.setAccessToken("[Mapbox のアクセストークン]");
なお、setAccessToken() で設定するトークンは android/gradle.properties に追加したものと同じです。
あとは、マップを表示したい箇所に下記を追加してください。
<MapboxGL.MapView style={mapStyle} />
この状態で実際に Android の実機で実行したところ、無事に Mapbox の地図が表示されました！
なお、まだ地図の中心位置やマップピンなどを指定していないので、緯度: 0、経度: 0 の地点が表示されます。
最低限の機能は以上で実装完了です！
あとは中心座標を変更したり、マップピンを追加・移動できる処理を追加していく予定です。
また、iOS にも実装します！
以上、React Native で Mapbox の地図を表示できるライブラリ「@react-native-mapbox-gl/maps」のご紹介でした。
ご参考になれば幸いです。
