![スクリーンショット 2020-01-31 20.03.05.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2Fec54fe0e-3b22-5b62-faaa-baec6d11a759.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2bc5fee6a0ad75e3d371d17ac3052646)
スイス発の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](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2F37f7aa05-99a6-0144-eec3-f870447e6366.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=97cba6aff193fa6c78a0c34335202869)
Mapbox GL JSのインストール
Mapbox GL JSは以下のコマンドで簡単にインストールすることができます。
$yarn add mapbox-gl
背景地図を読み込む準備をする
登録したMapTiler.jpのトップページからマイページに飛び…
![スクリーンショット 2020-02-02 17.03.13.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2Fed5cad97-385a-0673-f576-68bf9dcc13df.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e6d2f13809b90a82612b29622137c877)
左側のメニューバーの「Maps」を選択し…
![スクリーンショット 2020-02-02 17.04.07.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2F564c43d8-66fc-666e-6bc1-16ad485cad7a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=226fe3e1edaa5972c0bd721a90ee8d20)
下の方に移動すると「JP MIERUNE Streets」という項目があるのでクリック!
![スクリーンショット 2020-02-02 17.04.39.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2F3ac62e8b-680f-351c-49e2-c56f97823729.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b7a4c86923c72c2eb2183ec142790031)
「JP MIERUNE Streets」の画面で、背景地図のイメージが確認できます!
![スクリーンショット 2020-02-02 17.08.46.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2Fac2a92bf-68e3-9463-70ff-002d1699a715.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=99c1f633e9943221d688146ace821bf9)
下に移動し、「Use vector style」に書いてあるURLを利用して地図を表示させますのでどこかにメモしておきましょう!
![スクリーンショット 2020-02-02 17.10.00.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2F802e878e-59f1-fdf4-1431-a7af4db51f4f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=64d514307ab2b65e628d8c90b0b6bd08)
URLは
https://api.maptiler.com/maps/jp-mierune-streets/style.json?key=hogehogefugafuga
のようになっており、hogehogefugafuga
の部分はアカウントごとに異なる大切なキーですので、公開などしないようにしておきましょう!
とはいえ、クエリパラメータとしてkeyを設定しているため、デベロッパーツールなどからkeyが覗けるので、実運用する際にはリファラーを切るなど自己管理を徹底しましょう!
プロジェクトの設定
現在のプロジェクト構造はこんな感じになっていると思います
![スクリーンショット 2020-01-31 21.14.22.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F203944%2Fb3688fcb-7da1-aea4-cc62-83a2ad25d49a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=29bbf269832411142ca8d63d28ffcd24)
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のキーの部分をコピーしましょう
{
"maptilerKey": "hogehogefugafuga"
}
App.jsの細部の説明
書いてあるコードの説明をします!
以下ではMapbox GL JSを読み込んでいます。
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
作成したkey.jsonはApp.jsでは以下のように読み込みます
import keyJson from './key';
const maptilerKey = keyJson["maptilerKey"]
以下の部分ではMapbox GL JSを利用して地図を表示させています。
react/Mapbox GL JSで背景地図を読み込む場合は、DOMが生成されているcomponentDidMount
以降のライフサイクルでmapオブジェクトをインスタンス化させる必要があるようで、以下のようなコードになっています。
右記の記事を参考にさせていただきました!:React と Mapbox GL 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)}/>
)
}
}
//マップのコントローラー追加
map.addControl(new mapboxgl.NavigationControl());
の部分ではwebサービスで地図が表示されている箇所によく見るこれ
を表示させるためのコンポーネントを読み込んでいます
最後に、このファイルのデフォルトでAppクラスを吐き出すように設定します。
export default App;
App.cssを編集
App.cssを以下のように編集し、地図を画面いっぱいまで広げましょう!
.map {
width: 100vw;
height: 100vh;
}
地図をブラウザ上で確認!
全ての設定が終わったので以下のコマンドでサーバーを起動させブラウザでlocalhost:3000にアクセスしましょう!
こんな感じの画面が表示されれば成功です!
ベクターの地図をMapbox GL JSで読み込んでいるので、斜めから見ても回転させても文字がしっかり崩れずに表示されていますね!
よくできました!!!