【React】React-Map-GL使ってみた

Reactど素人の私ですが、勉強会でReact-Map-GLを使ってマップアプリを触る機会があったのでまとめます。
間違った認識が多々あるかと思いますのであしからず。

# 環境
`React.js`
`React-Map-GL(MapBox)`
`yarn`
`Git`

# 用語説明・特徴

**React.js**
FacebookがOSSとして公開している`UIのパーツを作る`ためのライブラリ。
いくつものコンポーネントが集まって一つのUIのパーツを作る。
開発途中から利用されることを想定して作られているため、UIの機能追加に特化している。

コンポーネント=原子
UIのパーツ=分子
1つのファイル=物(鉛筆とか水とかあらゆる物)
みたいなイメージ。

**コンポーネント指向**
React.jsの概念として用いられる。
UIを部品化して管理し、再利用する設計手法。

**create-react-app**
React.jsで開発するための環境を構築してくれるツール。


**Mapbox**
カスタマイズ性の高い地図サービス。
参考資料：[MapboxとGoogle Mapsを比べながらMapboxの本当の素晴らしさを発掘する](https://qiita.com/nazomikan/items/3ad5e53b24901fd82ba7)

**React-Map-GL**
Uber製のMapboxをカスタマイズしたライブラリ。
(Uberがカスタマイズして提供しているMapboxってこと？)

# 実装
1. 練習(環境構築〜サーバー立ち上げ)
2. React-Map-GLでmapを表示
3. mapをカスタマイズ
4. 他のデフォルトmapを表示

## 1.練習(環境構築〜サーバー立ち上げ)

**yarnインストール**
参考資料：[homebrewでyarnインストール](https://qiita.com/hiro266/items/fb1d37c180d6cbc696c8)

**create-react-appインストール**

```console:ターミナル
$ yarn global add create-react-app
```

**create-react-appで環境構築**

```console:ターミナル
$ mkdir hoge //ディレクトリ作成
$ cd hoge

$ create-react-app fuga //railsのrails newみたいなの
$ cd fuga
$yarn start //ローカルサーバー立ち上げ
```

[クリック](http://localhost:3000)すると

[![Image from Gyazo](https://i.gyazo.com/a2470cb8a3e09d51b6c5f970dbd7e190.png)](https://gyazo.com/a2470cb8a3e09d51b6c5f970dbd7e190)

おお！
railsの時もそうでしたが最初の画面が表示されるだけで嬉しい！！！

ファイルの編集はここ

```jsx:/fuga/src/App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello World
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

```

## 2. React-Map-GLでmapを表示

**Mapboxのトークン取得**

[Mapbox](https://www.mapbox.com/)アカウント登録 → トークン取得 
トークンはアカウントページの下の方にあります。

**GitHubからリポジトリをクローン**

※先ほど作成した`fuga`と同じ階層にclone。

```console:ターミナル
$ git clone https://github.com/uber/react-map-gl.git
```

**取得したトークンをファイルに挿入**

```js:/react-map-gl/examples/controles/src/app.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import MapGL, { Popup, NavigationControl, FullscreenControl, ScaleControl } from 'react-map-gl';

import Pins from './pins';
import CityInfo from './city-info';

import CITIES from '../../.data/cities.json';

// ここの''に先ほど取得したトークンを挿入
const TOKEN = '';
```

**サーバー立ち上げ**

```console:ターミナル
$ cd react-map-gl/examples/controles/src

$ yarn install
$ yarn start
```

`react-map-gl/examples/controles/src`まで移動してからyarnコマンドを入力しないと起動しない。

自動で新ブラウザが立ち上がり...
[![Image from Gyazo](https://i.gyazo.com/6bd1d48d900124e22d503fac2b475b5e.png)](https://gyazo.com/6bd1d48d900124e22d503fac2b475b5e)

おお〜！
感動！！

## 3. mapをカスタマイズ
上記のmapはいくつものコンポーネント(UI部品)が集まって表示されています。
なので部品ごとに編集をすることができます。
ここではいくつかのカスタマイズを実装していきます。

### コントロールパネル非表示

これ邪魔ですよね。消します。
[![Image from Gyazo](https://i.gyazo.com/0fad4f7ef189c781948388c5acc1f148.png)](https://gyazo.com/0fad4f7ef189c781948388c5acc1f148)

```js:/react-map-gl/examples/controles/src/app.js

// import ControlPanel from './control-panel';
.
.
.
// <ControlPanel containerComponent={this.props.containerComponent} />
```
コントロールパネルのフォームを`import`してJSXで表示させているので
この二行をコメントアウトすると消えます。

[![Image from Gyazo](https://i.gyazo.com/7aae5c23f4a0169e5a18f2f11cbfdd21.png)](https://gyazo.com/7aae5c23f4a0169e5a18f2f11cbfdd21)

### 座標の変更

デフォルトではアメリカが表示されるように座標が設定してありますのでこれを東京に変更します。

```js:/react-map-gl/examples/controles/src/app.js
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        latitude: 35.681236,   // 緯度
        longitude: 139.767125, // 経度
        zoom: 8,               // 地図の拡大縮小設定
        bearing: 0,
        pitch: 0
      },
      popupInfo: null
    };
  }
.
.
.
```

緯度経度を変更して地図の拡大縮小設定で見やすい大きさに設定。私は8くらいがちょうど良いかと思います。

[![Image from Gyazo](https://i.gyazo.com/625643f0b42ba29c9bcbf6927493842f.jpg)](https://gyazo.com/625643f0b42ba29c9bcbf6927493842f)

### ピンを表示させてクリックすると詳細をモーダル

デフォルトでアメリカのいくつかの地域にはピンが立っていて、クリックするとポップアップが表示されます。
こんな感じ。
[![Image from Gyazo](https://i.gyazo.com/2140904811bec41e53d8f3b492aed152.jpg)](https://gyazo.com/2140904811bec41e53d8f3b492aed152)

このピンを東京にも立てます！
ピンのコンポーネントはjson形式でまとまって管理されています。

```js:/react-map-gl/examples/.data/cities.json
[
.
.
.
 {
    "city": "Tokyo",
    "population": "13,942,856",
    "image": "https://www.nta.co.jp/media/tripa/static_contents/nta-tripa/item_images/images/000/087/964/medium/4b99ef28-16db-4e8c-948b-6c9cf056ad58.png?1562116683",
    "state": "Tokyo",
    "latitude": 35.681236,
    "longitude": 139.767125
  }
]
```

ファイルの最終行にこうやって東京の情報を入れてあげると

[![Image from Gyazo](https://i.gyazo.com/27a2f39ad6f540d071425e86d346bc5c.jpg)](https://gyazo.com/27a2f39ad6f540d071425e86d346bc5c)

サクサクカスタマイズできて楽しいですな！！！

## 4. 他のデフォルトmapを表示

今までは`controls`というmapファイルを表示させたりカスタマイズしてきました。
次は`heatmap`を表示させてみます。

```js:/react-map-gl/examples/heatmap/src/app.js
import React, {Component} from 'react';
import {render} from 'react-dom';
import MapGL, {Source, Layer} from 'react-map-gl';
import ControlPanel from './control-panel';
import {json as requestJson} from 'd3-request';
import {heatmapLayer} from './map-style';

const MAPBOX_TOKEN = ''; // トークン入力
```

もう一度トークンを入力して

```console:ターミナル
$ cd react-map-gl/examples/heatmap/src

$ yarn install
$ yarn start
```

ディレクトリ移動してyarnインストール、サーバー立ち上げで

[![Image from Gyazo](https://i.gyazo.com/ac8c292550c717aa0d40bc5845d4061d.jpg)](https://gyazo.com/ac8c292550c717aa0d40bc5845d4061d)

デフォルトで地震の回数で色を表示させているようです。
こちらも色々カスタムできそうです。

参考資料：[REACT-MAP-GLのexampleを紹介します](https://qiita.com/aki_suga/items/940b623af47a64b0e073)

# まとめ
APIって便利だなあというのが素直な感想です。
地図サービスといったらGoogleMap一択かと思っていましたが、Mapboxで独自の地図を作るのも面白いかもしれません。
色々な技術に触れて使えるようになっていきたいと思った、そんな勉強会でした。
ありがとうございました(^^)