CSV データを変換して地図上にマーカー表示する

# 概要

2023年2月1日に実施されたセミナー「[手持ちのCSV データを変換して地図上に表示してみよう](https://geolonia.connpass.com/event/273251/?utm_campaign=event_finish&utm_source=notifications&utm_medium=email&utm_content=title_link)」に参加しました。Geoloniaの中の人に許可いただきましたので、セミナーの内容を情報共有したいと思います。すぐに忘れてしまうので忘備録を兼ねて。

Geoloniaの地図に複数のマーカーを設置するには、マーカーの緯度経度を指定したGeoJSON形式のファイルを読み込むのが簡単です。「CSV→GeoJSON」の変換は、GeoJSON APIを使うと、変換だけなく Web公開（GitHub Pages）も自動で行ってくれます。

最初に、GeoJSON形式について簡単に説明します。

# GeoJSONについて

GeoJSONの仕様については、ここに詳しく書かれています。→[Geojson仕様](https://docs.geolonia.com/geojson/)

次に示すのが、GeoJSONの例です。

```sample.geojson
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [経度,緯度]
      },
      "properties": {}
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [経度,緯度]
      },
      "properties": {}
    }
  ]
}
```

GeoJSONはJSONの一種で、キーと値によってデータを定義します。featuresキーに「featureオブジェクトの配列」を保存することで、複数地点の指定ができます。coordinatesキーには「経度、緯度」の順番で位置情報を数値で保存します。

Geolonia の Embed API で GeoJSON を読み込むには、divタグの属性に[class="geolonia"][data-geojson="GeoJSONのURL"]を指定するだけです。これだけで、複数地点にマーカーが表示された地図を描画することができます。

```sample.html
<div
  class="geolonia"
  data-geojson="GeoJSONのURL"
></div>
```
以上で、前提知識の説明は終わりです。次に、CSVをGeoJSONに変換し、Web公開してくれる GeoJSON APIを説明します。

# GeoJSON API

GeoJSON APIのGitHubを見てみましょう。使い方が詳しく書かれています。

[GeoJSON API](https://github.com/geoloniamaps/geojson-api)

READMEの説明に沿って解説いたします。まず、「Use this template」で、このテンプレートを自分のリポジトリにコピーしてください。リポジトリの名前は任意です。今回は「geojson-api2」にしました（2つ目なので、2の添字付き）。

![screenshot_514.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/001516e0-79d1-f8ca-7659-2d0d95215333.png)

テンプレートがコピーできたら、Settings->Actions->General->Workflow Permissionsで「Read and write permissions」を選んでセーブします（ここ重要！）

![screenshot_507.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/7a74f33a-d42a-e6a9-6f5d-799f142bb52a.png)

次に、example.csv を編集して、マーカーを表示したい場所（複数）を指定します。CSVの
各列のデータについては、GitHubのREADMEを参照してください。今回は、首都圏某市の図書館一覧のデータを登録しました。

データの編集が終わったら、「commit changes」をしてください。GitHub Actionsで自動的にGeoJSONへの変換が実行されます。

![screenshot_515.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/8ec57a38-15c4-f992-0d31-bc65b821508d.png)

数分待って、Actionsタブで、コミットが成功したか確認します。（テンプレートをコピーしたときの、initial commint はPermissionsを変更していないため、失敗しています。）

![screenshot_516.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/3790dc17-7718-c1d2-bdc7-3ea1ff19ddcd.png)

GeoJSON を自分のGitHub Pages で公開するための設定を行います。Settings->Pages->Build and developmentで、gh-pagesブランチを指定します。これで、自前のサーバーを用意する必要もなく、HTTPSでGeoJSONにアクセスできるようになりました。

![screenshot_508.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/d0fdcece-36de-b636-70f8-0c64c9175b6f.png)

自動作成された GeoJSONを確認するには、ブラウザで「https://<あなたのGitHubユーザー名>.github.io/<リポジトリ名>/<ファイル名>.json」にアクセスします。下の画像のように、正しく変換できていることが確認できました。

![screenshot_518.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/daa701e4-441b-7e5f-4a45-49b75bf5a86a.png)

最後に、マーカー付きの地図を表示します。

# マーカー付きの地図を表示する

セミナーでは、CodePenを使って、地図の表示を確認しました。CodePenは初めて使いましたが、サーバーを立てる必要もなく、フロントの開発を行えるので便利です。数行のコードを書くだけで、地図を表示することができました。

![screenshot_519.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/bb2b2352-41fe-f08c-27ef-3c19da38bf83.png)

HTMLエリアのコード

```html
<div
  class="geolonia"
  data-geojson="https://creativival.github.io/geojson-api2/example.json"
></div>

<script type="text/javascript" src="https://cdn.geolonia.com/v1/embed?geolonia-api-key=YOUR-API-KEY"></script>

```

CSSエリアのコード

```css
.geolonia {
  height: 600px;
}
```

コードはたったのこれだけです！　　GeoJSONの変換は少し面倒でしたが、コーディングは1分で終わりました。

scriptタグで、Embed APIを読み込むと、地図が表示されます。CodePenを含めて、特定の環境では、共通のAPI KEY 「YOUR-API-KEY」 で地図表示可能です。
CSS で \<dev class="geolonia"\>タグの heightを指定してやらないと、地図が表示できません。ここが「はまりポイント」とのことです（私もしっかり、はまりましたー）。

自動的に全てのマーカーが表示されるように、中心点と倍率が決定されるそうです。地図を見てみると、マーカーが重なると、大きいマーカーになって数字で表してくれています。Google Mapsでは、マーカーがたくさん重なってゴチャゴチャしてしまうところが、Geolonia Mapsでは、綺麗にレンダリングされるところが素晴らしいです。

これで、CSVファイルさえ用意すれば、複数マーカーの地図が表示できるようになりました。セミナーの内容報告は以上です。

# 所感

オンラインのセミナーは初めて参加したが、学びが多かった。GitHub Actionsは、WebアプリをHerokuでビルドするときに使っていたが、今回のような使い方もできることがわかり、驚いた。CodePenもCSSをいじったりするときに便利そうで、今後使っていこうと思う。

# 参考

[Geolonia](https://geolonia.com/)

[CSV を GeoJSON に変換し、地図で表示する](https://docs.geolonia.com/cookbook/geojson-api/)

[Geolonia Mapsを画像でダウンロードして著作権表示して使う方法](https://qiita.com/creativival/items/54b1dc6a05d7f1f5225b)