explaingit

visgl/react-map-gl

★ 8,451TypeScriptAudience · developerComplexity · 2/5Setup · moderate

TLDR

react-map-gl is a React library that wraps Mapbox GL or the free MapLibre GL engine, letting you drop interactive WebGL-rendered maps into any React app using JSX components and props.

Mindmap

mindmap
  root((react-map-gl))
    What it does
      Interactive maps in React
      JSX map components
      WebGL rendering
    Engines
      Mapbox GL JS
      MapLibre GL JS
    Use Cases
      Location apps
      Data overlays
      Real estate maps
    Audience
      React developers
      Frontend engineers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add an interactive, zoomable map to a React web app with just a few lines of JSX.

USE CASE 2

Display GPS coordinates or location datasets on a vector map using deck.gl overlays.

USE CASE 3

Build a map-based UI without a Mapbox account by switching to the free MapLibre engine.

Tech stack

TypeScriptReactMapbox GL JSMapLibre GL JSWebGL

Getting it running

Difficulty · moderate Time to first run · 30min

Mapbox engine requires a paid Mapbox account and API access token, MapLibre engine is free with no account needed.

In plain English

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.

Copy-paste prompts

Prompt 1
Write a React component that renders a fullscreen map centered on Tokyo using react-map-gl and MapLibre GL, no Mapbox account needed.
Prompt 2
Add clickable markers to a react-map-gl map that open a popup with custom text when tapped.
Prompt 3
Show me how to switch a project from the Mapbox engine to the MapLibre engine in react-map-gl without changing component code.
Prompt 4
Build a React page with a react-map-gl map that lets users search for a city and flies to it on the map.
Open on GitHub → Explain another repo

← visgl on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.