LoginSignup
10

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-01-30

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ってこと?)

実装

  1. 練習(環境構築〜サーバー立ち上げ)
  2. React-Map-GLでmapを表示
  3. mapをカスタマイズ
  4. 他のデフォルト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 //ローカルサーバー立ち上げ

クリックすると

Image from Gyazo

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

ファイルの編集はここ

/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アカウント登録 → トークン取得
トークンはアカウントページの下の方にあります。

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

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

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

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

/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 = '';

サーバー立ち上げ

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

$ yarn install
$ yarn start

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

自動で新ブラウザが立ち上がり...
Image from Gyazo

おお〜!
感動!!

3. mapをカスタマイズ

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

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

これ邪魔ですよね。消します。
Image from Gyazo

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

// import ControlPanel from './control-panel';
.
.
.
// <ControlPanel containerComponent={this.props.containerComponent} />

コントロールパネルのフォームをimportしてJSXで表示させているので
この二行をコメントアウトすると消えます。

Image from Gyazo

座標の変更

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

/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

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

デフォルトでアメリカのいくつかの地域にはピンが立っていて、クリックするとポップアップが表示されます。
こんな感じ。
Image from Gyazo

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

/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

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

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

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

/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 = ''; // トークン入力

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

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

$ yarn install
$ yarn start

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

Image from Gyazo

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

参考資料:REACT-MAP-GLのexampleを紹介します

まとめ

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10