react-map-gl

react-map-gl is a React library that makes it easy to embed interactive maps into a web application. Under the hood it wraps either Mapbox GL JS or MapLibre GL JS, both of which are JavaScript engines for displaying vector maps in a browser using WebGL (a graphics technology that lets web pages render 2D and 3D visuals using the computer's graphics card). react-map-gl gives those engines a React-friendly interface, so instead of calling JavaScript methods imperatively, developers configure the map through JSX components and props the same way they build any other React UI.

The library supports two map engines. Mapbox GL JS is a commercial product from Mapbox; using it with this library requires a Mapbox account and an API access token. MapLibre GL JS is a community-maintained, open-source fork of an older version of Mapbox GL JS; it requires no account or token and is free for any use. You choose which engine by importing from a different sub-path (react-map-gl/maplibre or react-map-gl/mapbox).

Adding a basic map to a page takes just a few lines. You import the Map component, pass it a starting longitude and latitude, a zoom level, and a style URL that controls how the map looks (roads, terrain, satellite, etc.). The component handles all the rendering, controls, and user interactions automatically. The README includes two short code examples showing the minimum setup for each engine.

The project originated at Uber and is now maintained under vis.gl, which is part of the OpenJS Foundation, a nonprofit organization that stewards open-source JavaScript projects. It integrates with other vis.gl tools like deck.gl for large-scale data overlays on maps. The README is brief and points to a separate documentation site for full API references and additional guides.