Comes with additional React interfaces such as context and hooks to support custom components. Use together with e.g. deck.gl to render performant and compelling 2D and 3D WebGL visualizations on top of your MapLibre GL JS and Mapbox GL JS based maps.

October 3, 2025 - React components for MapLibre GL JS and Mapbox GL JS. Latest version: 8.1.1, last published: 3 days ago. Start using react-map-gl in your project by running `npm i react-map-gl`. There are 478 other projects in the npm registry using react-map-gl.

react-map-gl is a suite of React components designed to provide a React API for mapbox-gl or maplibre-gl.

Create a React web app that uses Mapbox GL JS to render a map.

We cannot provide a description for this page right now

May 1, 2023 - What I implemented for the map, is MapBox GL JS, which you can find here. However I went for a deeper option, given that I had to use Create-React-App (which I do have some qualms with) and use Uber’s implementation of a wonderful React wrapper for Mapbox called React-Map-GL.

Each library offer unique features that may not exist in another. ... react-map-gl was first created by Uber's Visualization team, where Mapbox was used as a component to build powerful web tools such as geospatial analytics and self-driving data visualization.

import * as React from 'react'; import Map from 'react-map-gl/mapbox'; // If using with mapbox-gl v1: // import Map from 'react-map-gl/mapbox-legacy'; import 'mapbox-gl/dist/mapbox-gl.css'; function App() { return ( <Map mapboxAccessToken="<Mapbox access token>" initialViewState={{ longitude: -122.4, latitude: 37.8, zoom: 14 }} style={{width: 600, height: 400}} mapStyle="mapbox://styles/mapbox/streets-v9" /> ); }

Use Maplibre GL JS Map as a fully controlled reactive component.

The map's default API URL for requesting tiles, styles, sprites, and glyphs. ... The maximum number of images (raster tiles, sprites, icons) to load in parallel. ... By default, every time a map component is unmounted, all internal resources associated with the underlying Map instance are released.

The vis.gl community maintains two React libraries that seamlessly work with deck.gl. react-map-gl - a React wrapper for Mapbox GL JS and MapLibre GL JS.

February 21, 2026 - TypeScript definitions for react-map-gl. Latest version: 6.1.8, last published: 13 days ago. Start using @types/react-map-gl in your project by running `npm i @types/react-map-gl`. There are 36 other projects in the npm registry using @types/react-map-gl.

react-map-gl-geocoder-v2-example Example usage of react-map-gl-geocoder which is a React wrapper for mapbox-gl-geocoder for use with react-map-gl

import * as React from 'react'; import Map from 'react-map-gl/maplibre'; function App() { const [viewState, setViewState] = React.useState({ longitude: -100, latitude: 40, zoom: 3.5 }); return <Map {...viewState} onMove={evt => setViewState(evt.viewState)} mapStyle="mapbox://styles/mapbox/streets-v9" />; } A real-world application likely uses more complicated state flows: Using map with a state store (Redux) example ·

Fast, reliable, and secure dependency management.

import {useSelector, useDispatch} from 'react-redux'; import Map, {Marker} from 'react-map-gl/maplibre'; function MapView() { const viewState = useSelector((s: RootState) => s.viewState); const vehicles = useSelector((s: RootState) => s.vehicles); const dispatch = useDispatch(); const onMove = useCallback(evt => { dispatch({type: 'setViewState', payload: evt.viewState}); }, []); return ( <Map {...viewState} onMove={onMove} mapStyle="mapbox://styles/mapbox/streets-v9" > > {vehicles.map(vehicle => ( <Marker key={vehicle.id} longitude={vehicle.coordinates[0]} latitude={vehicle.coordinates[1]}> <svg> // vehicle icon </svg> </Marker>) )} </Map> ); }

Skip to main content · Examples · Mapbox · Clusters · Markers, Popups and Controls · Custom Cursor · Draggable Marker · Draw Polygon · Highlight By Filter · Geocoder

npm ERR! Could not resolve dependency: npm ERR! peer react-map-gl@"^5.x" from [email protected] npm ERR! node_modules/react-map-gl-draw npm ERR! react-map-gl-draw@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR!

MapLibre GL JS is a TypeScript library that uses WebGL to render interactive maps from vector tiles in a browser.

June 4, 2024 - On the web, this is done using a JavaScript library called Mapbox GL JS, which uses Web GL to render interactive maps from vector tiles and Mapbox styles. If you’re adding map interfaces to your React application, the Uber engineering team has created a React package called react-map-gl that makes this process much easier.