Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat] Add ability to cache map-instances to be re-used when remounted #319

Closed
usefulthink opened this issue Apr 18, 2024 · 0 comments · Fixed by #349
Closed

[Feat] Add ability to cache map-instances to be re-used when remounted #319

usefulthink opened this issue Apr 18, 2024 · 0 comments · Fixed by #349

Comments

@usefulthink
Copy link
Collaborator

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 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.
usefulthink added a commit that referenced this issue May 8, 2024
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).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant