Re:Earthで神社参拝マップを作ってみた

システムに地図を取り入れるとなると、真っ先に思い浮かぶのはお馴染みGoogleマップや、専門家寄りのArcGISなどでしょうか。

これはこれで大変便利なんですが、小規模なシステムでかつ狭いエリアを対象にしたい場合は、大袈裟すぎたりします。そんな時は、GeoServerやOpenLayers、CesiumJSなどを駆使して要求を満たしていました。しかし、これだと色々書いて設定していく必要があり、とても面倒に感じていました。

もう少しシンプルで使いやすいGISはないものか、と思案していたところ見つけたのがこの [デジタルツイン構築プラットフォーム『Re:Earth』](https://www.u-tokyo.ac.jp/adm/fsi/ja/projects/dp/project_00040.html)でした。

前々から使ってみたかったので、今回はこれで、神社参拝マップなるものを作ってみました。
完成形は[こんな感じ](https://fdabebiadb.reearth.io)。

まだまだ調整したいところはありますが、コンテンツさえ用意できれば、１時間程度ポチポチするだけでこのような地図アプリを公開できるとは、驚きでした。いい時代になったもんです。

国交省の[PLATEAU（プラトー）](https://www.mlit.go.jp/plateau/)もちゃんと学習してみたかったのでどっちにするか迷ったのですが、まずはこっちから。

## Re:Earthとは
『Re:Earth』は、フィジカル空間の情報をバーチャル空間に再現する「デジタルツイン」の基盤となるWebGISプラットフォームで、そのデジタルツインの基盤となるソースコードは、オープンソース・ソフトウェアとして公開されています。

## 環境
[チュートリアル](https://docs2.reearth.io/developer-guide/intro/getting-started/setup-environment)を見ればローカルマシンやAWSなどに自分の環境を立てることができます。今回は気軽に使いたいので、ノーコード。[Re:Earth Cloud](https://reearth.io/ja/service/cloud/)を利用しました。

システムアーキテクチャは以下の通り。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/6cf63308-cc73-2397-db52-0f93b49c02c0.png">
（出典：[開発者ガイド＞Common Guide](https://docs2.reearth.io/ja/developer-guide/common/architecture)）

## ユーザ作成とサインイン
まずは[ここ](https://reearth.io)でユーザ作成し、サインインすると、以下の個人ポータルが表示されます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/41679ff3-825e-c776-02b3-f51b279e6249.png">

## プロジェクト作成
「新規プロジェクト作成」を押下し、プロジェクト名などを入力後、「作成」押下します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/6346c7ff-ea65-7c64-1886-8bf1ebf38237.png">

プロジェクトが追加されました。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/dae2117d-eefe-7bf3-ece5-5eee96795d58.png">

## プロジェクトの表示
追加したプロジェクト「神社参拝マップ」を選択すると、以下の画面が表示されます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/cc57ec90-e1ca-b68f-b65e-7867d6e7d043.png">

## マーカの設置
画面上部アイコン列左端のピンを適当な場所にドラッグ＆ドロップします。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/4f7177ff-b891-d6b2-b04b-6ce1201b6aec.png">

右側にマーカーの情報を入力します。緯度経度、画像、テキスト情報などが入力できます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/06d977e5-886a-44b0-37f9-f3e8a0a0a9c2.png">

左側の"マーカー"をダブルクリックすると名称変更できます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/014da800-e1e0-2d9a-b784-b7fa493f0d38.png">

## インフォボックスの設置
マーカーにはインフォボックスを設置し、詳細情報を記載することができます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/fa558baf-5cd1-ef1a-9833-e66a98d767ce.png">

小ウィンドウ中の「＋」押下で、インフォボックス内にコンテンツを追加できます。設定可能なコンテンツの種類は以下の通り。
* Text
* Image
* Video
* Location
* Table
* HTML

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/1d50a57d-6774-916b-bb81-8c2491397c2c.png">

今回は、ImageとTextを設置しました。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/04129523-6429-a1dc-e6af-5d254011658a.png">

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/7e0f5cc9-f83b-07db-b912-4cbe70f3fefe.png">

## 標高データの設定
左側「シーン」を選択し、右側「地形」をONにして種類の「Cesium World Terrain」を選択すると地形の起伏が表現されます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/28ccb2a1-5588-338c-0a60-8d9dff2d8aad.png">

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/3b7f5d3f-a434-4259-9bde-3894c107ee2c.png">

## 公開設定
右上の「公開」ボタン押下でプロジェクトが公開されます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/c8b06b77-c083-6ae6-3282-4117191974a9.png">

公開URL、埋め込みコードが生成されます。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/6cdbdfcb-7204-683b-cee4-58bc5d7eccd1.png">

公開URLから見て、地図をグリグリして遊んでみるとこんな感じになりました。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108207/56f29310-06b5-9c48-da04-e1fb4d770978.png">

## 最後に
今回はとりあえず使ってみようとクラウドサービスを利用しましたが、OSSなので次回はコードの中身を追ってみようと思います。どうやって実装しているのか、を追っていくのはとても楽しみです。機会があればまたどこかで共有できればよいですね。最後までお付き合いいただき、ありがとうございました。