visgl/react-map-gl

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 1,085 Commits
.github		.github
docs		docs
examples		examples
modules		modules
scripts		scripts
test		test
website		website
.eslintignore		.eslintignore
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
.nvmrc		.nvmrc
.ocularrc.js		.ocularrc.js
.prettierrc		.prettierrc
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
TESTING.md		TESTING.md
index.html		index.html
lerna.json		lerna.json
package.json		package.json
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Repository files navigation

version build downloads

react-map-gl | Docs

react-map-gl is a suite of React components designed to provide a React API for mapbox-gl or maplibre-gl. More information in the online documentation.

See our Design Philosophy.

Installation

Using react-map-gl requires react >= 16.3.

# Using Maplibre
npm install react-map-gl maplibre-gl

# Using Mapbox
npm install react-map-gl mapbox-gl

Example

// Using Maplibre
import * as React from 'react';
import Map from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
function App() {
 return (
 <Map
 initialViewState={{
 longitude: -122.4,
 latitude: 37.8,
 zoom: 14
 }}
 style={{width: 600, height: 400}}
 mapStyle="https://api.maptiler.com/maps/streets/style.json?key=<Maptiler access token>"
 />
 );
}

// Using Mapbox
import * as React from 'react';
import Map from 'react-map-gl/mapbox';
import 'mapbox-gl/dist/mapbox-gl.css';
function App() {
 return (
 <Map
 // https://visgl.github.io/react-map-gl/docs/get-started/mapbox-tokens
 mapboxAccessToken="<Mapbox access token>"
 initialViewState={{
 longitude: -100,
 latitude: 40,
 zoom: 3.5
 }}
 style={{width: 600, height: 400}}
 mapStyle="mapbox://styles/mapbox/streets-v9"
 />
 );
}