Cannot use useMap to get updated viewport from Map

[victcebesp]

Hello guys!

Today I was updating the code to use react-map-gl v7 and I came up with an issue. Before updating to v7, I could use MapContext with useContext in order the current zoom of a map. So I could do something like this:

export default function CurrentZoomLevel(props) {
   const context = useContext(MapContext);
   
   return (<div>context.viewport.zoom</div>)
}

That way that component would have always the updated zoom level of the map on that context.

However, now I cannot use MapContext as it was removed and using useMap is not getting the current values of the different maps as it is only updated when a new map is mounted or unmounted on the MapProvider.

Just to clarify, I thought I could do the following in order to get the currentZoomLevel at every moment but using useMap:

export default function CurrentZoomLevel(props) {
   const maps = useMap();
   
   return (<div>maps["mapId"].getZoom()</div>)
}

But this is just getting the initial value when the map in mounted not the updated value.

So the soluion I implemented was creating a currentZoomLevel state variable on a father component, and pass the setCurrentZoomLevel function to the react-map-gl map in order to update the currentZoomLevel when the move event is triggered. Am I missing something?

Otherwise, do you think it would be interesting to implement this?

[Pessimistress]

https://github.com/visgl/react-map-gl/tree/master/examples/get-started/hook

[victcebesp]

Hello @Pessimistress! I have already tried that. I used useMap and tried to use useEffect passing the return from useMap in order to update always the zoom level but is was only updating when a map was mounted or unmounted, not when a map suffered a change. Does this makes sense?

[Pessimistress]

No. Are you doing https://github.com/visgl/react-map-gl/blob/master/examples/get-started/hook/controls.js#L21

[victcebesp]

oh my god... I did not realized about that line... Thanks for pointing it out!

[Pessimistress]

👍

Just FYI the context does not update on every camera change because that would force every component subscribing to it to rerender, regardless if they care about camera change or not. The current model allow you to control when your own component wants to update.

[victcebesp]

Thank you very much for explaining. I still need to learn a lot for sure. I really appreciate your help @Pessimistress !