visgl
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-glor
# Using Mapbox
npm install react-map-gl mapbox-glExample
// 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>"
/>
);
}or
// 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"
/>
);
}Learn more with in our Getting Started guide.
Contribute
See contribution guide.
Attributions
react-map-gl is part of vis.gl, an OpenJS Foundation project.
Development is also supported by
