【ReactNative】react-native-mapsで地図の表示領域が描画される度に領域情報を取得する

概要

先日【ReactNative】react-native-mapsを導入するという記事を書いて、react-native-mapsを導入しましたが、今回はちょっとした応用編です。

最もオーソドックスな使い方としては、下記の実装例のようにMapに初期表示位置としてinitialRegionを指定し、その周辺に表示したい情報をMarkerでプロットしていくのがオーソドックスな使い方だと思います。

TestMap.tsx

import React from 'react';
import MapView, { Region, Marker, LatLng } from 'react-native-maps';

render(){

    // 初期表示位置
    const initialRegion : Region = {
        latitude : 35.689521,
        longitude : 139.691704,
        latitudeDelta : 0.0460,
        longitudeDelta : 0.0260,
    }

    // マーカーの表示位置
    const coordinate : LatLng = {
        latitude : 35.689421,
        longitude :139.691604
    }

    <MapView initialRegion={initialRegion} >
        <Marker coordinate={coordinate} />
    </MapView>
}

しかしながら、プロットする情報が膨大な数の場合は表示領域から近いものに絞って表示するかと思います。
そうなると必要になってくるのが、ユーザ操作によって表示領域が変更された時に、新たに描画される表示領域情報を取得する処理です。
今回は、onRegionChangeCompleteを使った方法を紹介します。

バージョン情報

"react-native": "0.61.5",
"react-native-maps": "^0.26.1",
"native-base": "^2.13.8",

onRegionChangeComplete()を使って表示領域を取得する

onRegionChangeCompleteは、ユーザ操作(もしくはそれ以外の処理)でMapviewの表示領域が変更されるたびに呼ばれます。
下記のようにしてRegion型で再表示後の表示領域情報を受け取ります。

TestMap.tsx

import React from 'react';
import MapView, { Region, Marker, LatLng } from 'react-native-maps';

// 表示領域変更イベントを検知
handleRegionChange = (region : Region) => {
  console.log(region);
  // -> {"latitude": xxx, "latitudeDelta": xxx, "longitude": xxx, "longitudeDelta": xxx}
};

render(){

    // 初期表示位置
    const initialRegion : Region = {
        latitude : 35.689521,
        longitude : 139.691704,
        latitudeDelta : 0.0460,
        longitudeDelta : 0.0260,
    }

    // マーカーの表示位置
    const coordinate : LatLng = {
        latitude : 35.689421,
        longitude :139.691604
    }

    <MapView initialRegion={initialRegion} 
             onRegionChangeComplete={handleRegionChange} >
        <Marker coordinate={coordinate} />
    </MapView>
}

おまけ：getMapBoundaries()でNorthEast,SouthWestを取得

基本的にRegionで事足りるかと思いますが、表示領域の北東(NorthEast)と南西(SouthWest)を取得するバージョンも記載します。
上記のコードに対してMapViewのrefを保持しておき、表示領域が切り替わったタイミングでgetMapBoundaries()を実行します。
getMapBoundaries()は非同期ですので注意が必要です。

TestMap.tsx

import React from 'react';
import MapView, { Region, Marker, LatLng } from 'react-native-maps';

// 表示領域変更イベントを検知
handleRegionChange = async (region : Region) => {
  console.log(region);
  // -> {"latitude": xxx, "latitudeDelta": xxx, "longitude": xxx, "longitudeDelta": xxx}
  const mapBoundaries = await this.map.getMapBoundaries();
  console.log(mapBoundaries);
  // -> {"northEast": {"latitude": xxx, "longitude": xxx}, "southWest": {"latitude": xxx, "longitude": xxx}}
};

render(){

    // 初期表示位置
    const initialRegion : Region = {
        latitude : 35.689521,
        longitude : 139.691704,
        latitudeDelta : 0.0460,
        longitudeDelta : 0.0260,
    }

    // マーカーの表示位置
    const coordinate : LatLng = {
        latitude : 35.689421,
        longitude :139.691604
    }

    <MapView initialRegion={initialRegion} 
             ref={ref => {this.map = ref}}
             onRegionChangeComplete={handleRegionChange} >
        <Marker coordinate={coordinate} />
    </MapView>
}

おわりに

MapViewの表示領域が変わるたびに、その表示範囲に近いデータを都度取得してプロットするのはよくあるパターンだと思います。
覚えてしまえばなんてことない方法ですが、備忘として残しておきます。