mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-25 16:02:50 +00:00
48 lines
1.6 KiB
Markdown
48 lines
1.6 KiB
Markdown
# Get Started
|
|
|
|
|
|
# Installation
|
|
|
|
`react-map-gl` requires `node >= v4` and `react >= 15.4`.
|
|
|
|
```sh
|
|
npm install --save react-map-gl
|
|
```
|
|
|
|
|
|
## Using with Browserify, Webpack, and other JavaScript Bundlers
|
|
|
|
* `browserify` - react-map-gl is extensively tested with `browserify` and works without configuration.
|
|
|
|
* `webpack 2` - Most of the provided react-map-gl examples use webpack 2. For a minimal example, look at the [exhibit-webpack](https://github.com/uber/react-map-gl/tree/master/examples/exhibit-webpack) folder, demonstrating a working demo using `webpack 2`.
|
|
|
|
* `create-react-app` - At this point configuration-free builds are not possible with webpack due to the way the mapbox-gl-js module is published. You will need to eject your app (sorry) and add one line alias to your webpack config.
|
|
|
|
While react-map-gl provides many examples, getting mapbox-gl-js to work non-browserify-based build environments can sometimes be tricky. If the examples provided by react-map-gl are not enough, a good source for more information might be [Using mapbox-gl and webpack together](https://mikewilliamson.wordpress.com/2016/02/24/using-mapbox-gl-and-webpack-together/).
|
|
|
|
|
|
## Example Code
|
|
|
|
```js
|
|
import {Component} from 'react';
|
|
import ReactMapGL from 'react-map-gl';
|
|
|
|
class Map extends Component {
|
|
render() {
|
|
return (
|
|
<ReactMapGL
|
|
width={400}
|
|
height={400}
|
|
latitude={37.7577}
|
|
longitude={-122.4376}
|
|
zoom={8}
|
|
onViewportChange={(viewport) => {
|
|
const {width, height, latitude, longitude, zoom} = viewport;
|
|
// Optionally call `setState` and use the state to update the map.
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
```
|