Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@nokonoko_1203

MapTilerの地図をReact/Mapbox GL JSを使って最短でブラウザ上に表示させる

スクリーンショット 2020-01-31 20.03.05.png

スイス発のMapTilerに基盤地図情報の建物データなどを盛り込み日本向けにローカライズされた日本地図の配信サービスMapTiler.JPが提供開始になりました。

google mapsなどのサービスと比較して大抵の場合で安価に利用できるので、是非ご利用を検討してみてくださいね!

プレスリリース
紹介記事

フリープランがあるみたいなので早速無料登録して利用してみましょう!

登録はこちらの記事を参照

※この記事はmacの方対象ですが、Node.jsとYarnがインストールされていればwinでも動作するとは思います

Node.jsをインストール

node -vコマンドでNode.jsがインストールされているか確認しましょう

$node -v
v12.13.1

インストールされていない場合は公式サイトから安定版をインストール!

Yarnのインストール

yarn -vコマンドでYarnがインストールされているか確認しましょう

$yarn -v
1.21.0

インストールされていない場合は以下のコマンドでインストール

$brew install yarn

creat-react-appのインストール

以下のコマンドでインストール

$yarn global add create-react-app

Reactプロジェクトの作成

以下コマンドでReactのプロジェクトを作成
※maptiler_appの部分は任意です

$npx create-react-app maptiler_app

作成したプロジェクトに移動、サーバーを起動させます

$cd maptiler_app
$yarn start

http://localhost:3000にアクセスし、以下のような画面が表示されればReactの準備は完了です

スクリーンショット 2020-01-31 21.04.34.png

Mapbox GL JSのインストール

Mapbox GL JSは以下のコマンドで簡単にインストールすることができます。

$yarn add mapbox-gl

背景地図を読み込む準備をする

登録したMapTiler.jpのトップページからマイページに飛び…

スクリーンショット 2020-02-02 17.03.13.png

左側のメニューバーの「Maps」を選択し…

スクリーンショット 2020-02-02 17.04.07.png

下の方に移動すると「JP MIERUNE Streets」という項目があるのでクリック!

スクリーンショット 2020-02-02 17.04.39.png

「JP MIERUNE Streets」の画面で、背景地図のイメージが確認できます!

スクリーンショット 2020-02-02 17.08.46.png

下に移動し、「Use vector style」に書いてあるURLを利用して地図を表示させますのでどこかにメモしておきましょう!

スクリーンショット 2020-02-02 17.10.00.png

URLは

https://api.maptiler.com/maps/jp-mierune-streets/style.json?key=hogehogefugafuga

のようになっており、hogehogefugafugaの部分はアカウントごとに異なる大切なキーですので、公開などしないようにしておきましょう!

とはいえ、クエリパラメータとしてkeyを設定しているため、デベロッパーツールなどからkeyが覗けるので、実運用する際にはリファラーを切るなど自己管理を徹底しましょう!

プロジェクトの設定

現在のプロジェクト構造はこんな感じになっていると思います

スクリーンショット 2020-01-31 21.14.22.png

src/App.jsを内のコードを削除して以下のように書き換えましょう

src/App.js
import React, {Component} from 'react';
import './App.css'
//mapbox gl jsとcss呼び出し
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
//APIキーの読み込み
import keyJson from './key';

const maptilerKey = keyJson["maptilerKey"]


class App extends Component {
    // DOMが出来上がっているcomponentDidMount以降のライフサイクルでmapオブジェクトをインスタンス化
    componentDidMount() {
        let map = new mapboxgl.Map({
            container: this.container,
            style: `https://api.maptiler.com/maps/jp-mierune-streets/style.json?key=${maptilerKey}`,
            center: [141.350755, 43.068661],
            zoom: 13
        });
        //マップのコントローラー追加
        map.addControl(new mapboxgl.NavigationControl());
    }

    render() {
        return (
            <dev className={"map"} ref={e => (this.container = e)}/>
        )
    }
}

export default App;

その後、srcディレクトリ内(App.jsと同ディレクトリ)にkey.jsonというファイルを作成し、先ほどメモしておいたURLのキーの部分をコピーしましょう

src/key.json
{
    "maptilerKey": "hogehogefugafuga"
}

App.jsの細部の説明

書いてあるコードの説明をします!

以下ではMapbox GL JSを読み込んでいます。

src/App.js
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

作成したkey.jsonはApp.jsでは以下のように読み込みます

src/App.js
import keyJson from './key';

const maptilerKey = keyJson["maptilerKey"]

以下の部分ではMapbox GL JSを利用して地図を表示させています。

react/Mapbox GL JSで背景地図を読み込む場合は、DOMが生成されているcomponentDidMount以降のライフサイクルでmapオブジェクトをインスタンス化させる必要があるようで、以下のようなコードになっています。

右記の記事を参考にさせていただきました!:React と Mapbox GL JS を使ってベクトルタイルを表示する

src/App.js
class App extends Component {
    // DOMが出来上がっているcomponentDidMount以降のライフサイクルでmapオブジェクトをインスタンス化
    componentDidMount() {
        let map = new mapboxgl.Map({
            container: this.container,
            style: `https://api.maptiler.com/maps/jp-mierune-streets/style.json?key=${maptilerKey}`,
            center: [141.350755, 43.068661],
            zoom: 13
        });
        //マップのコントローラー追加
        map.addControl(new mapboxgl.NavigationControl());
    }

    render() {
        return (
            <div className={"map"} ref={e => (this.container = e)}/>
        )
    }
}
src/App.js
        //マップのコントローラー追加
        map.addControl(new mapboxgl.NavigationControl());

の部分ではwebサービスで地図が表示されている箇所によく見るこれ
スクリーンショット 2020-02-02 18.04.38.png
を表示させるためのコンポーネントを読み込んでいます

最後に、このファイルのデフォルトでAppクラスを吐き出すように設定します。

export default App;

App.cssを編集

App.cssを以下のように編集し、地図を画面いっぱいまで広げましょう!

src/App.css
.map {
    width: 100vw;
    height: 100vh;
}

地図をブラウザ上で確認!

全ての設定が終わったので以下のコマンドでサーバーを起動させブラウザでlocalhost:3000にアクセスしましょう!

こんな感じの画面が表示されれば成功です!

ベクターの地図をMapbox GL JSで読み込んでいるので、斜めから見ても回転させても文字がしっかり崩れずに表示されていますね!

maptiler.gif

よくできました!!!

6
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
nokonoko_1203
経歴:建設コンサルタント→在職中にPythonを勉強→WebGISエンジニア
MIERUNE
位置情報の技術情報や豆知識をMIERUNEがお届けします!。位置に関する可視化や解析に関するご相談がございましたらwebまでぜひご連絡ください!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?