【React Native】「react-native-maps」ライブラリを使ってOpenStreetMapを表示する

かなりハマったので備忘録としてまとめ。
タイトルにある通り、React Native アプリで「react-native-maps」ライブラリを使って Open Street Map を表示させる方法についてです。

参考にさせていただいた記事はこちらから。

React Native と OpenStreetMap で散歩用のiOS地図アプリを作ってみた – Qiita
https://qiita.com/lfcd85/items/248d944592b93c2c009e

「react-native-maps」ライブラリの GitHub のページはこちらです。

GitHub – react-native-maps/react-native-maps: React Native Mapview component for iOS + Android
https://github.com/react-native-maps/react-native-maps

さて実装していきますが…今回は Android での実装手順です。
iOS はまだ確認していませんのでご了承ください。

まず下記コマンドでライブラリをインストールします。

npm install react-native-maps --save-exact
npm install

次に、android/app/src/main/AndroidManifest.xml を開き、<application> タグ内に下記を追加します。

<meta-data
  android:name="com.google.android.geo.API_KEY"
  android:value="[GoogleMap の API キー]"/>

なお、APIキーは、下記の公式サイトを参考にして発行してください。

Get an API Key | Maps SDK for Android | Google Developers
https://developers.google.com/maps/documentation/android-api/signup

上記が完了したら、いよいよ実装していきます。
今回実装したコードは下記のとおりです。

import React, { Component } from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import MapView, { UrlTile, Marker } from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

class MapPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      },
    }
  }
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <MapView
          region={this.state.region}
          style={styles.map}
          mapType="none">
          <UrlTile
            urlTemplate='http://c.tile.openstreetmap.org/{z}/{x}/{y}.png' />
        </MapView>
      </SafeAreaView>
    );
  }
}
export default MapPage;

重要なのは、32行目の <MapView> に指定した mapType="none" と、34行目の <UrlTile> に指定した urlTemplate='http://c.tile.openstreetmap.org/{z}/{x}/{y}.png' です。
34行目の urlTemplate='http://c.tile.openstreetmap.org/{z}/{x}/{y}.png' で、表示する地図タイルを OpenStreetMap に指定しているのですが、<MapView> で表示している Google Map は残り続けるので、mapType="none" を指定しないと OpenStreetMap は表示されませんでした。
正直ここに滅茶苦茶ハマりまして…<UrlTile> で Open Street Map を指定してるのに、Google Map が表示されている！？となっていました。
issues で検索したら全く同じことを質問している人がいたのでその投稿を見たら分かりましたが…これは分かりにくかった…。
しかも、表示マップの変更は完了しましたが、もう一点問題があって、左下に Google Map のロゴが残ってしまっているんですよね…。
こちらも引き続き対応していきたいですが…issues を見た感じ、解決策が力業っぽいです。
…なるべく穏便に対応できればと思います！

以上、React Native で「react-native-maps」ライブラリを使って Open Street Map を表示する方法についてでした。
ご参考になれば幸いです。