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

概要

2023年2月1日に実施されたセミナー「手持ちのCSV データを変換して地図上に表示してみよう」に参加しました。Geoloniaの中の人に許可いただきましたので、セミナーの内容を情報共有したいと思います。すぐに忘れてしまうので忘備録を兼ねて。

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

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

GeoJSONについて

GeoJSONの仕様については、ここに詳しく書かれています。→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

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

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

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

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

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

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

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

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

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

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

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エリアのコード

.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

CSV を GeoJSON に変換し、地図で表示する

Geolonia Mapsを画像でダウンロードして著作権表示して使う方法