When using the Mapbox GL JS library, pay-as-you-go charges must be taken into account.
The pay-as-you-go system for Search and Navigation depends on the number of API requests.
Mapbox GL JS Loads for Web pay-as-you-go counts.
A pay-as-you-go charge is also established for the Maps themselves when drawing Maps in Mapbox GL JS,
Maps Loads for Web counts as one load each time a map is loaded.
( One map load keeps a session for 12 hours. )
Code-wise, it seems that one load is counted every time the following is executed.
new mapboxgl.Map()Therefore, it is necessary to design the system to keep the map load as low as possible.
Measures for react-map-gl
The same is true for react-map-gl, the library that wraps Mapbox GL JS.
In the case of React, too, every time a component is mounted, it is rendered and a map load is run.
The solution to this is to set the ‘reuseMaps’ property.
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} />;
}By setting the ‘reuseMaps’ property to true, the Map instance will be retained in memory even if the component is unmounted and will be used around when remounting runs.
Summay
The reuseMaps property is a way to avoid Mapbox’s map loading pay-as-you-go charges as much as possible, so it should be used proactively.
