Skip to content

Commit 1cbfcbe

Browse files
authored
Readme: Add npm install example for maplibre (#2271)
1 parent fda0e0a commit 1cbfcbe

File tree

1 file changed

+45
-12
lines changed

1 file changed

+45
-12
lines changed

README.md

Lines changed: 45 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111

1212
<h1 align="center">react-map-gl | <a href="https://visgl.github.io/react-map-gl">Docs</a></h1>
1313

14-
`react-map-gl` is a suite of [React](http://facebook.github.io/react/) components designed to provide a React API for [mapbox-gl](https://github.com/mapbox/mapbox-gl-js) or [maplibre-gl](https://maplibre.org/maplibre-gl-js/docs/). More information in the online documentation.
14+
`react-map-gl` is a suite of [React](https://react.dev/) components designed to provide a React API for [mapbox-gl](https://github.com/mapbox/mapbox-gl-js) or [maplibre-gl](https://maplibre.org/maplibre-gl-js/docs/). More information in the online documentation.
1515

1616
See our [Design Philosophy](docs/README.md#design-philosophy).
1717

@@ -20,29 +20,62 @@ See our [Design Philosophy](docs/README.md#design-philosophy).
2020
Using `react-map-gl` requires `react >= 16.3`.
2121

2222
```sh
23-
npm install --save react-map-gl mapbox-gl
23+
# Using Maplibre
24+
npm install react-map-gl maplibre-gl
25+
```
26+
_or_
27+
28+
```sh
29+
# Using Mapbox
30+
npm install react-map-gl mapbox-gl
2431
```
2532

2633
### Example
2734

2835
```js
36+
// Using Maplibre
37+
import * as React from 'react';
38+
import Map from 'react-map-gl/maplibre';
39+
40+
function App() {
41+
return (
42+
<Map
43+
initialViewState={{
44+
longitude: -122.4,
45+
latitude: 37.8,
46+
zoom: 14
47+
}}
48+
style={{width: 600, height: 400}}
49+
mapStyle="https://api.maptiler.com/maps/streets/style.json?key=<Maptiler access token>"
50+
/>
51+
);
52+
}
53+
```
54+
_or_
55+
56+
```js
57+
// Using Mapbox
2958
import * as React from 'react';
3059
import Map from 'react-map-gl';
3160

3261
function App() {
33-
return <Map
34-
mapLib={import('mapbox-gl')}
35-
initialViewState={{
36-
longitude: -100,
37-
latitude: 40,
38-
zoom: 3.5
39-
}}
40-
style={{width: 600, height: 400}}
41-
mapStyle="mapbox://styles/mapbox/streets-v9"
42-
/>;
62+
return (
63+
<Map
64+
mapboxAccessToken="<Mapbox access token>"
65+
initialViewState={{
66+
longitude: -100,
67+
latitude: 40,
68+
zoom: 3.5
69+
}}
70+
style={{width: 600, height: 400}}
71+
mapStyle="mapbox://styles/mapbox/streets-v9"
72+
/>
73+
);
4374
}
4475
```
4576

77+
Learn more with in our [Getting Started](https://visgl.github.io/react-map-gl/docs/get-started) guide.
78+
4679
### Using Mapbox Tokens
4780

4881
**Starting with v2.0, mapbox-gl requires a Mapbox token for any usage, with or without the Mapbox data service. See [about Mapbox tokens](/docs/get-started/mapbox-tokens.md) for your options.**

0 commit comments

Comments
 (0)