You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The cost of the Google Maps JavaScript API are calculated based on the number of map views.
As far as I understand it, a map view is essentially a call to the google.maps.Map constructor. This can cause a lot of unnecessary fees if the <Map> component gets mounted and unmounted a lot.
Proposal
react-map-gl has a boolean prop reuseMaps for the Map component that controls the caching behavior. Map instances are stored on a stack together with their DOM elements and can be re-used instead of creating a new instance.
For us that would have to happen in the useMapInstance hook:
we're currently creating the contaierRef to be returned from useMapInstance() so the component can add the ref to the <div> / <gmp-map> element. We need to do this the other way around and receive a ref where the map dom-element can be appended to.
When the map dom element is created in the effect, we can try to restore the map from cache in the effect and remount that instead
cache should be keyed by unmodifiable props (mapId, are there others?) and be a stack where maps are popped from in the effect and pushed to in the effect-destructor.
The text was updated successfully, but these errors were encountered:
Introduces map-instance caching, allowing maps to be persisted across unmount/remount cycles.
Fixes#319
BREAKING CHANGE: Introduction of map instance caching needed a change to the DOM-Structure produced by the map component (added a div-element owned by the Map component to contain the map instance).
Target Use Case
The cost of the Google Maps JavaScript API are calculated based on the number of map views.
As far as I understand it, a map view is essentially a call to the
google.maps.Map
constructor. This can cause a lot of unnecessary fees if the<Map>
component gets mounted and unmounted a lot.Proposal
react-map-gl
has a boolean propreuseMaps
for the Map component that controls the caching behavior. Map instances are stored on a stack together with their DOM elements and can be re-used instead of creating a new instance.For us that would have to happen in the
useMapInstance
hook:contaierRef
to be returned fromuseMapInstance()
so the component can add the ref to the<div>
/<gmp-map>
element. We need to do this the other way around and receive a ref where the map dom-element can be appended to.The text was updated successfully, but these errors were encountered: