embed

チュートリアル 段2：データを載せる

前の段でできたこと

段1で、地図を自分の見たい場所と角度にできました。でも、のっているのは中心の点ひとつだけ。この段では、自分のデータ（複数の地点）を地図に重ねます。

GeoJSON を知る

embed で地図にデータを載せるには、GeoJSON という形式のファイルを使います。GeoJSON は地理データの標準フォーマットで、テキストエディタで読み書きできる JSON です。

シンプルな GeoJSON は次のような形をしています。

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": { "type": "Point", "coordinates": [139.767125, 35.681236] },
      "properties": { "name": "東京駅" }
    }
  ]
}

データを地図に重ねる

GeoJSON ファイルを Web サーバーに置いたら、div に data-geojson 属性を追加するだけです。

<div class="geolonia"
     data-lat="35.68" data-lng="139.75" data-zoom="11"
     data-marker="off"
     data-geojson="/data/sample-spots.geojson"></div>

クラスタリングで見やすくする

データが数十〜数百点になると、点が重なって読めなくなります。data-cluster="on" を足すと、近い点を自動でまとめてくれます。

<style>
  .geolonia { width: 100%; height: 100vh; }
</style>

<div class="geolonia"
     data-lat="35.68" data-lng="139.75" data-zoom="11"
     data-marker="off"
     data-geojson="/data/sample-spots.geojson"
     data-cluster="on"></div>

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

縮小すると個別の点がクラスターになります。色を変えたい場合は data-cluster-color="#ff0000" のように指定できます。

自分のデータに差し替える

  1. スプレッドシートや CSV で、1行 = 1地点のデータを用意する（経度と緯度の列が必要）。
  2. GeoJSON に変換する。手で書いてもよいですし、geojson.io などのツールを使うと楽です。GeoloniaでもGeoJSON Makerという使いやすいツールを提供しています。
  3. ファイルを Web サーバーに置いて、data-geojson のパスを差し替える。

動いたか確認する

地図上にマーカーが複数表示されていれば成功です。拡大や縮小をしてクラスターが分かれるのも確認してください。

うまくいかないとき
  • 点が海や別の大陸に出る → 座標の順序を確認。GeoJSON の coordinates は [経度, 緯度] です（HTML の data-lat/data-lng とは逆）。
  • 何も出ない → ブラウザの開発者ツール（ネットワークタブ）で GeoJSON のレスポンスを確認。404 や JSON の文法エラーが多い原因です。
  • 外部 URL の GeoJSON が読めない → CORS の制限です。まずは同じサーバーにファイルを置いてみてください。

次は

自分のデータが地図にのりました。でも見た目はデフォルトのまま。次の段3：見た目を変えるで、地図全体のスタイルを差し替えます。