Uberのreact-map-glを使ってみる


![image](https://qiita-image-store.s3.amazonaws.com/0/49910/d1c29e4d-517c-b11e-441b-024a2a4fcd5d.png)

[react-map-gl](https://uber.github.io/react-map-gl/#/)

[uber/react-map-gl: React friendly API wrapper around MapboxGL JS](https://github.com/uber/react-map-gl)



## 前段
create-react-appが未導入であればインストールする

```
npm install -g create-react-app
```


## React ベースアプリ作成

アプリ作成＋テスト実行


map-glアプリを作成する

```
create-react-app map-gl
```

結果

```
yarn start
    Starts the development server.

yarn build
    Bundles the app into static files for production.

yarn test
    Starts the test runner.

yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd map-gl
yarn start

Happy hacking!
```

実行してみる

```
cd map-gl
yarn start
```

動いた
![image](https://qiita-image-store.s3.amazonaws.com/0/49910/a75b3c02-fc02-f211-c5a8-7947bfdd82f3.png)


## react-map-gl 導入
react-map-glを入れる

```
npm install --save react-map-gl
```

App.jsを変更する

```js:App.js
import React, { Component } from 'react';
import ReactMapGL from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

class App extends Component {
  state = {
    viewport: {
      width: 400,
      height: 400,
      latitude: 37.7577,
      longitude: -122.4376,
      zoom: 8
    }
  };

  render() {
    return (
      <div className="App">
        <ReactMapGL
          {...this.state.viewport}
          onViewportChange={(viewport) => this.setState({ viewport })}
        />
      </div>
    );
  }
}

export default App;
```



### 実行する

```
yarn start
```



![image](https://qiita-image-store.s3.amazonaws.com/0/49910/09e4da20-a61e-4ddc-a980-fcb33466744b.png)



Mapboxのアクセストークンが必用なようです。




## Access tokens

### トークンの取得

Mapboxのアカウントがあれば以下からトークンの発行・管理ができます。

[Access Tokens | Mapbox](https://www.mapbox.com/account/access-tokens)

### トークンの使用

[説明](https://uber.github.io/react-map-gl/#/Documentation/getting-started/about-mapbox-tokens)によると以下の3種類でトークンの適用ができるようです。

* Modify the source directly
* Set the MapboxAccessToken environment variable
* Provide it in the URL, e.g ?access_token=TOKEN

ひとまずここではURLにトークンを付けて実行して実行結果をみてみようと思います。

URLに?access_token=を付加し、その後に取得したトークンをつなげます。
以下のようなイメージになります。

http://localhost:3000/?access_token=pk.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


実行するとマップが表示されました。

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/d1c29e4d-517c-b11e-441b-024a2a4fcd5d.png)


### トークンの秘匿化

とはいえ[.env](https://github.com/motdotla/dotenv)を使ってトークンを隠すことが望ましいと書いてあります。


#### dotenvのInstall

create-react-appには最初からdotenvが入っているのでインストールは必用ないみたい。


.envファイルをプロジェクトルート直下に作成
ファイルの中身を以下のようにする。

```
MapboxAccessToken=pk.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```


ここから下は調査中です。


```
yarn build
yarn start
```


>Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

[REACT\_APP\_SECRET\_CODE=abcdef](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables)