Maybe this is what you are looking for.
<Layer
{...{
id: "zone",
type: "fill",
source: {
type: "geojson",
data: {
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[-118.5687542, 34.0412107],
[-118.4082538, 33.8727824],
[-118.3717758, 33.8729961],
[-118.3688574, 33.9671539],
[-118.3363247, 33.9894178],
[-118.2811303, 34.0096732],
[-118.1707964, 34.0336193],
[-118.0576271, 34.0671419],
[-118.0600304, 34.1575335],
[-118.1163354, 34.2083719],
[-118.5152764, 34.2268251],
[-118.5687542, 34.0412107],
],
],
},
},
},
layout: {},
paint: {
"fill-color": "rgb(5, 30, 52)",
"fill-opacity": 0.1,
},
}}
/>
GitHub
github.com › visgl › react-map-gl
GitHub - visgl/react-map-gl: React friendly API wrapper around MapboxGL JS · GitHub
# Using Maplibre npm install react-map-gl maplibre-gl
Starred by 8.4K users
Forked by 1.4K users
Languages TypeScript 65.5% | JavaScript 32.2%
React Map GL
visgl.github.io › introduction
Introduction | 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.
Videos
50:04
Building with Mapbox GL JS in React - YouTube
react mapbox gl integration to show marker on map | React ...
03:00
React map with a marker maplibre gl js | 2023 tutorial step by ...
19:11
react mapbox gl | Polygon layers tutorial - YouTube
Chakra UI - MAP integration in React with react-map-gl and ...
npm
npmjs.com › package › react-map-gl
react-map-gl - npm
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.
» npm install react-map-gl
Published Apr 11, 2026
Version 8.1.1
React Map GL
visgl.github.io › react-map-gl
Home | react-map-gl
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.
GitHub
github.com › urbica › react-map-gl
GitHub - urbica/react-map-gl: React Component Library for Mapbox GL JS · GitHub
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>;
Starred by 424 users
Forked by 49 users
Languages JavaScript
SourceForge
sourceforge.net › projects › react-map-gl.mirror
react-map-gl download | SourceForge.net
Download react-map-gl for free. React friendly API wrapper around MapboxGL JS. react-map-gl is a suite of React components designed to provide a React API for Mapbox GL JS-compatible libraries. More information is in the online documentation.
React Map GL
visgl.github.io › source
Source | react-map-gl
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'; import 'maplibre-gl/dist/maplibre-gl.css'; const geojson: FeatureCollection = { type: 'FeatureCollection', features: [ {type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}} ] }; const layerStyle: CircleLayer = { id: 'point', type: 'circle', paint: { 'circle-radius': 10, 'circle-color': '#007cbf' } }; function App() { return <Map initialViewState={{ longitude: -122.4, latitude: 37.8, zoom: 14 }} mapStyle="https://demotiles.maplibre.org/style.json" > <Source id="my-data" type="geojson" data={geojson}> <Layer {...layerStyle} /> </Source> </Map>; }
React Map GL
visgl.github.io › adding custom data
Adding Custom Data | react-map-gl
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> ); }
Lostcreekdesigns
lostcreekdesigns.co › writing › a-complete-guide-to-sources-and-layers-in-react-and-mapbox-gl-js
A Complete Guide to Sources and Layers in React and Mapbox GL JS | Lost Creek Designs
February 22, 2021 - The aim of this post is to provide an introduction to adding a variety of spatial data formats to a React application using Mapbox GL JS. Understanding how to add sources and layers to a map will open a lot of doors for the types of applications you can build using Mapbox GL JS.
CodeSandbox
codesandbox.io › examples › package › react-map-gl
react-map-gl examples - CodeSandbox
Use this online react-map-gl playground to view and fork react-map-gl example apps and templates on CodeSandbox.
React Map GL
visgl.github.io › react-map-gl › examples
react-map-gl
Skip to main content · Examples · Mapbox · Clusters · Markers, Popups and Controls · Custom Cursor · Draggable Marker · Draw Polygon · Highlight By Filter · Geocoder
Urbica
urbica.github.io › react-map-gl
Urbica React Map GL
We cannot provide a description for this page right now
GitHub
github.com › alex3165 › react-mapbox-gl › blob › master › docs › API.md
react-mapbox-gl/docs/API.md at master · alex3165/react-mapbox-gl
import { Source } from "react-mapbox-gl"; ...
Author alex3165
React Map GL
visgl.github.io › what's new
What's new | react-map-gl
New Export: WebMercatorViewport is re-exported from the viewport-mercator-project library for ease of use. It's recommended to import it from react-map-gl instead to avoid future dependency change. ... New Components: Layer and Source have been added to provide better React parity with the ...
React Map GL
visgl.github.io › get started
Get Started | react-map-gl
Find out your maplibre version by running yarn list maplibre-gl or npm ls maplibre-gl.
Reddit
reddit.com › r/mapbox › a complete guide to sources and layers in react and mapbox gl js
r/mapbox on Reddit: A Complete Guide to Sources and Layers in React and Mapbox GL JS
April 26, 2021 - For being such a foundational part of the Mapbox GL JS library, it can still be difficult to get your head around how to work with sources and layers. This was a painful learning process for me and as a result I wanted to put together a guide to save other folks some time. I have linked to the full guide below. Feedback is always welcome! https://www.lostcreekdesigns.co/writing/a-complete-guide-to-sources-and-layers-in-react...
npm
npmjs.com › package › react-mapbox-gl
react-mapbox-gl - npm
November 26, 2020 - Source · GeoJSONLayer · ZoomControl · ScaleControl · RotationControl · Marker (Projected component) Popup (Projected component) Cluster · npm install react-mapbox-gl mapbox-gl --save · Example: Adding the css in your index.html: <html> <head> ... <link · href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css" rel="stylesheet" /> </head> </html> // ES6 ·
» npm install react-mapbox-gl
Published Nov 26, 2020
Version 5.1.1
npm
npmjs.com › package › @types › react-map-gl
@types/react-map-gl - npm
February 21, 2026 - Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-map-gl.
» npm install @types/react-map-gl
Published Feb 21, 2026
Version 6.1.8
Yarn
classic.yarnpkg.com › en › package › react-map-gl
react-map-gl
Fast, reliable, and secure dependency management.