→品川区オープンデータ 文化・スポーツ施設・公園(shinagawa_culture_sports_park.csv)
このリポジトリは、CSV フォーマットのデータを GitHub Actions で GeoJSON に変換し API として公開するためのテンプレートリポジトリです。
Geolonia Maps なら以下のような簡単なマークアップで地図に表示することが可能です。
<div class="geolonia" data-geojson="<GeoJSON の URL>"></div>
デモ: https://codepen.io/geolonia/pen/RwgJjmE
- [Use this template] ボタンをクリックして、このテンプレートを自分のリポジトリにコピーしてください。
example.csvを編集してコミットすると数分後に GeoJSON が生成され、https://<あなたのGitHubユーザー名>.github.io/<リポジトリ名>/<ファイル名>.jsonのような URL でアクセスできます。（サンプル URL）- 任意のファイル名の CSV を複数設置することも可能です。
- 点データのみに対応しています。
- こちらのサンプルデータ をコピーして、ご自身のデータを入力してください。
- 入力したデータを CSV でエクスポートして、それを任意のファイル名でコミットしてください。
緯度経度の取得には、Community Geocoder をご利用することをご推奨します。
- GitHub のリポジトリのメニューの中にある [Settings] をクリックしてください。
- 移動先のページの下の方にある [GitHub Pages] のところで、以下のように設定してください。
- 保存された CSV は GitHub Actions によって、自動的に GeoJSON に変換されます。GeoJSON は、上述のように
https://<あなたのGitHubユーザー名>.github.io/<リポジトリ名>/<ファイル名>.jsonのような URL でアクセスできますので、ブラウザで URL を確認した後、その URL をコピーしてください。 - Geolonia Maps の API キーを取得 して、JavaScript API を設置 してください。
- 地図を表示したい場所に以下のような HTML を設置してください。
<div class="geolonia" data-geojson="<GeoJSON の URL>"></div>
デモ: https://codepen.io/geolonia/pen/RwgJjmE
詳しくは Geolonia Maps ドキュメンテーションを御覧ください。
| 列名 | 必須 | デフォルト | 内容 |
|---|---|---|---|
title |
○ | ここに入力された文字列は、マーカーの下にタイトルとして表示されます。 | |
lat |
○ | 緯度を指定してください。 (例: 35.6321) |
|
lng |
○ | lng - 必須。経度を指定してください。 (例: 139.8808) |
|
description |
マーカーをクリックした際に、ポップアップで表示させるコンテンツです。 | ||
marker-size |
medium |
medium、large、small のいずれかを指定してください。 |
|
marker-color |
rgba(255, 0, 0, 0.4) |
マーカーの色を指定してください。 | |
stroke |
#FFFFFF |
マーカーの輪郭線の色を RGB で指定してください。 | |
stroke-width |
2 |
境界線の太さ（ピクセル）を数字で指定してください。 |
marker-colorは、#FF0000またはrgba(255,0,0)のように指定することが可能です。- 列の順番に制約はありません。
descriptionでは、HTML も利用可能です。- 上記にない列は、
propertiesに保存されますが、これらの値を利用するには JavaScript によるプログラミングが必要です。 - サンプル CSV は、こちらにあります。
- データの仕様については、Geolonia Maps のドキュメンテーションもご参照ください。