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の本当の素晴らしさを発掘する
React-Map-GL
Uber製のMapboxをカスタマイズしたライブラリ。
(Uberがカスタマイズして提供しているMapboxってこと？)
実装
- 練習(環境構築〜サーバー立ち上げ)
- React-Map-GLでmapを表示
- mapをカスタマイズ
- 他のデフォルトmapを表示
1.練習(環境構築〜サーバー立ち上げ)
yarnインストール
参考資料：homebrewでyarnインストール
create-react-appインストール
$ yarn global add create-react-app
create-react-appで環境構築
$ mkdir hoge //ディレクトリ作成
$ cd hoge
$ create-react-app fuga //railsのrails newみたいなの
$ cd fuga
$yarn start //ローカルサーバー立ち上げ
クリックすると
おお！
railsの時もそうでしたが最初の画面が表示されるだけで嬉しい！！！
ファイルの編集はここ
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アカウント登録 → トークン取得
トークンはアカウントページの下の方にあります。
GitHubからリポジトリをクローン
※先ほど作成したfugaと同じ階層にclone。
$ git clone https://github.com/uber/react-map-gl.git
取得したトークンをファイルに挿入
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 = '';
サーバー立ち上げ
$ cd react-map-gl/examples/controles/src
$ yarn install
$ yarn start
react-map-gl/examples/controles/srcまで移動してからyarnコマンドを入力しないと起動しない。
自動で新ブラウザが立ち上がり...
おお〜！
感動！！
3. mapをカスタマイズ
上記のmapはいくつものコンポーネント(UI部品)が集まって表示されています。
なので部品ごとに編集をすることができます。
ここではいくつかのカスタマイズを実装していきます。
コントロールパネル非表示
これ邪魔ですよね。消します。
// import ControlPanel from './control-panel';
.
.
.
// <ControlPanel containerComponent={this.props.containerComponent} />
コントロールパネルのフォームをimportしてJSXで表示させているので
この二行をコメントアウトすると消えます。
座標の変更
デフォルトではアメリカが表示されるように座標が設定してありますのでこれを東京に変更します。
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くらいがちょうど良いかと思います。
ピンを表示させてクリックすると詳細をモーダル
デフォルトでアメリカのいくつかの地域にはピンが立っていて、クリックするとポップアップが表示されます。
こんな感じ。
このピンを東京にも立てます！
ピンのコンポーネントは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
}
]
ファイルの最終行にこうやって東京の情報を入れてあげると
サクサクカスタマイズできて楽しいですな！！！
4. 他のデフォルトmapを表示
今まではcontrolsというmapファイルを表示させたりカスタマイズしてきました。
次はheatmapを表示させてみます。
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 = ''; // トークン入力
もう一度トークンを入力して
$ cd react-map-gl/examples/heatmap/src
$ yarn install
$ yarn start
ディレクトリ移動してyarnインストール、サーバー立ち上げで
デフォルトで地震の回数で色を表示させているようです。
こちらも色々カスタムできそうです。
参考資料：REACT-MAP-GLのexampleを紹介します
まとめ
APIって便利だなあというのが素直な感想です。
地図サービスといったらGoogleMap一択かと思っていましたが、Mapboxで独自の地図を作るのも面白いかもしれません。
色々な技術に触れて使えるようになっていきたいと思った、そんな勉強会でした。
ありがとうございました(^^)