February 21, 2026 - This package contains type definitions for react-map-gl (https://github.com/visgl/react-map-gl#readme).

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

We sometimes render two maps side by side, and when the user interacts with one, update both cameras. We draw React UI outside of the map container, that moves with the camera. We also render WebGL graphic overlays on top of the map, most notably with deck.gl.

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

Use a MapLibre GL JS or Mapbox GL JS map as a fully controlled reactive component.

A JSON object that defines a raster-dem source according to the Maplibre Style Specification. A JSON object that defines a canvas source type.

maplibre-gl users no longer need to install mapbox-gl or a placeholder package as dependency. Change your imports to the new endpoint react-map-gl/maplibre. Components imported from here do not require setting the mapLib prop, and use the types defined by maplibre-gl.

Almost all imperative APIs (flyTo, fitBounds etc.) can now be called directly without breaking the React binding. Compatibility: first and third-party plugins! Directly use mapbox-gl-draw, mapbox-gl-geocoder, to name a few. TypeScript compliant: the code base is now entirely written in TypeScript, and all types can be imported.

Fast, reliable, and secure dependency management.

Using react-map-gl requires node >= 12 and react >= 16.3.

zoom(input: PositionInput & { scale: number; startPos?: [number, number] | undefined }): MapState; ... export class BaseControl<T extends BaseControlProps, S extends Element> extends React.PureComponent<T> {

Except for layers of the background type, each layer needs to refer to a source. Layers take the data that they get from a source, optionally filter features, and then define how those features are styled. import React from 'react'; import MapGL, { Source, Layer } from '@urbica/react-map-gl'; import 'mapbox-gl/dist/mapbox-gl.css'; <MapGL style={{ width: '100%', height: '400px' }} mapStyle='mapbox://styles/mapbox/light-v9' accessToken={MAPBOX_ACCESS_TOKEN} > <Source id='contours' type='vector' url='mapbox://mapbox.mapbox-terrain-v2' /> <Layer id='contours' type='line' source='contours' source-layer='contour' paint={{ 'line-color': '#877b59', 'line-width': 1 }} /> </MapGL>;

First version to support Mapbox GL JS' official types and MapLibre GL JS v5. This version fully separates the code that support each compatible map library: react-map-gl/mapbox: for use with mapbox-gl>=3.5.0

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

Use this online @types/react-map-gl playground to view and fork @types/react-map-gl example apps and templates on CodeSandbox.

{ id, // an unique identified generated inside react-map-gl-draw library geometry: { coordinates, // latitude longitude pairs of the geometry points type // geojson type, one of `Point`, `LineString`, or `Polygon` }, properties: { renderType, // Mainly used for styling, one of `Point`, `LineString`, `Polygon`, or `Rectangle`. Different from `geometry.type`. i.e.

import * as React from 'react'; import Map, {Source, Layer} from 'react-map-gl/maplibre'; import type {CircleLayer} from 'react-map-gl/maplibre'; import type {FeatureCollection} from 'geojson'; const geojson: FeatureCollection = { type: 'FeatureCollection', features: [ { type: 'Feature', geometry: { type: 'Point', coordinates: [-122.4, 37.8] }, properties: {title: '915 Front Street, San Francisco, California'} } ] }; const layerStyle: CircleLayer = { id: 'point', type: 'circle', paint: { 'circle-radius': 10, 'circle-color': '#007cbf' } }; function App() { return ( <Map initialViewState={{ longitude: -122.45, latitude: 37.78, zoom: 14 }}> <Source id="my-data" type="geojson" data={geojson}> <Layer {...layerStyle} /> </Source> </Map> ); }

React component that wraps mapbox-gl's Map class. This is also the default export from react-map-gl.

June 4, 2024 - Want to build map interfaces with React? In this post, learn to use react-map-gl to build two variations of map components.