UNPKG

3.86 kBMarkdownView Raw
1![Logo](/logo.png)
2
3# React-mapbox-gl | [Documentation](docs/API.md) | [Demos](http://alex3165.github.io/react-mapbox-gl/demos)
4
5[![Build Status](https://travis-ci.org/alex3165/react-mapbox-gl.svg?branch=master)](https://travis-ci.org/alex3165/react-mapbox-gl)
6[![npm version](https://img.shields.io/npm/v/react-mapbox-gl.svg?style=flat)](https://www.npmjs.com/package/react-mapbox-gl)
7[![npm downloads](https://img.shields.io/npm/dm/react-mapbox-gl.svg)](https://www.npmjs.com/package/react-mapbox-gl)
8[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-blue.svg)](https://github.com/microsoft/TypeScript)
9<br/>
10
11#### React wrapper for [mapbox-gl-js](https://www.mapbox.com/mapbox-gl-js/api/).
12
13<br/><br/>
14![London cycle example gif](docs/london-cycle-example.gif 'London cycle example gif')
15
16## Components
17
18### Proxy components (proxy between React and Mapbox API)
19
20- ReactMapboxGL
21- Layer & Feature
22 - property `symbol` displays a mapbox symbol.
23 - property `line` displays a lineString.
24 - property `fill` displays a polygon.
25 - property `circle` displays a mapbox circle.
26 - property `raster` displays a mapbox raster tiles.
27 - property `fill-extrusion` displays a layer with extruded buildings.
28 - property `background` displays a mapbox background layer.
29 - property `heatmap` displays a mapbox heatmap layer.
30- Source
31- GeoJSONLayer
32
33### DOM components (normal React components)
34
35- ZoomControl
36- ScaleControl
37- RotationControl
38- Marker (Projected component)
39- Popup (Projected component)
40- Cluster
41
42## Getting Started
43
44```
45npm install react-mapbox-gl mapbox-gl --save
46```
47
48Example:
49
50Adding the css in your index.html:
51
52```html
53<html>
54 <head>
55 ...
56 <link
57 href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css"
58 rel="stylesheet"
59 />
60 </head>
61</html>
62```
63
64```jsx
65// ES6
66import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
67import 'mapbox-gl/dist/mapbox-gl.css';
68
69// ES5
70var ReactMapboxGl = require('react-mapbox-gl');
71var Layer = ReactMapboxGl.Layer;
72var Feature = ReactMapboxGl.Feature;
73require('mapbox-gl/dist/mapbox-gl.css');
74
75const Map = ReactMapboxGl({
76 accessToken:
77 'pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A'
78});
79
80// in render()
81<Map
82 style="mapbox://styles/mapbox/streets-v9"
83 containerStyle={{
84 height: '100vh',
85 width: '100vw'
86 }}
87>
88 <Layer type="symbol" id="marker" layout={{ 'icon-image': 'marker-15' }}>
89 <Feature coordinates={[-0.481747846041145, 51.3233379650232]} />
90 </Layer>
91</Map>;
92```
93
94## Why are `zoom`, `bearing` and `pitch` Arrays ?
95
96If those properties changed at the mapbox-gl-js level and you don't update the value kept in your state, it will be unsynced with the current viewport. At some point you might want to update the viewport value (zoom, pitch or bearing) with the ones in your state but using value equality is not enough. Taking zoom as example, you will still have the unsynced zoom value therefore we can't tell if you want to update the prop or not. In order to explicitly update the current viewport values you can instead break the references of those props and reliably update the current viewport with the one you have in your state to be synced again.
97
98## [Current version documentation](docs/API.md)
99
100## [Version 3.0 documentation](https://github.com/alex3165/react-mapbox-gl/blob/v3.9.2/docs/API.md)
101
102## [Version 2.0 documentation](https://github.com/alex3165/react-mapbox-gl/blob/v2-archive/docs/API.md)
103
104## Contributions
105
106Please try to reproduce your problem with the [boilerplate](https://github.com/alex3165/react-mapbox-gl-debug) before posting an issue.
107
108## mapbox-gl-draw compatibility
109
110Try [react-mapbox-gl-draw](https://github.com/amaurymartiny/react-mapbox-gl-draw)
111
112## Looking for an Angular alternative?
113
114Try [ngx-mapbox-gl](https://github.com/Wykks/ngx-mapbox-gl)