[Mapbox]react-map-glのMap Loadの従量課金を考慮する

Mapbox GL JSライブラリを使用する際、従量課金を考慮しなければならない。
SearchやNavigationはAPIリクエスト数に応じにて従量課金が決まる仕組みになっている。

https://www.mapbox.jp/pricing

Mapbox GL JSのLoads for Webの従量課金のカウント

Mapbox GL JSでMapを描画するときのMaps自体にも従量課金が設けられており、
Maps　Loads for Webは、マップをロードするたびに１ロードとしてカウントされます。
( １マップロードで12時間のセッションが保持されます。 )

コード的には下記が実行されるたびに１ロードがカウントされるみたいです。

new mapboxgl.Map()

そのため、マップロードをできる限り抑える設計にしていく必要があります。

react-map-glでの対策

Mapbox GL JSをラップしているライブラリ「react-map-gl」でも同様のことが言える。

Reactの場合も、コンポーネントがマウントされるたびにレンダリングされ、マップロードが走る。

これを解決するためには、「reuseMaps」プロパティを設定することで解決する。

https://visgl.github.io/react-map-gl/docs/api-reference/map#reusemaps

import * as React from 'react';
import {useRef, useCallback} from 'react';
import Map from 'react-map-gl';
import type {MapRef} from 'react-map-gl';

export function App() {
  const mapRef = useRef<MapRef>();

  return <Map ref={mapRef} reuseMaps={true} />;
}

「reuseMaps」プロパティをtrueにすることで、コンポーネントがアンマウントされてもMapインスタンスはメモリに保持され、再マウントが走る際には、そのインスタンスを使い回してくれます。