What is the underlying architecture between Mapbox GL, Deck GL and React Map GL?

Question

I am working on a React webapp that is utilizing an interactive map visualization feature. We are using deck.gl libraries and react-map-gl. React Map GL is defined by Deck GL as a "A React wrapper around Mapbox GL which works seamlessly with deck.gl"

After reading that definition, I feel confused and question how exactly does everything architecturally tie together. I thought Deck GL and Mapbox GL are two seperate libs.

Can someone please explain to me how it all comes together? Mapbox, Mapbox GL, Deck GL, React Map GL and any other library/framework in between that's relevant?

Answer 1

I had worked recently on a project with exactly the same tech-stack that is open source. You can take reference from https://github.com/thevantageproject/foamviz/blob/dev/src/VizCartographerJourney/index.js

Also, you can learn from this tutorial: https://vis.academy/