ドキュメントを検索

embed

チュートリアル Step 2: マーカーとデータの追加

この Step の前提

Step 1 を終えて、地図の場所と視点を指定できる状態から始めます。この時点で表示されているのは中心の1点だけです。この Step では、複数の地点データを地図に重ねます。

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 の制限です。まず同じサーバーにファイルを配置して確認してください。

次の Step

以上で、地点データの追加は完了です。この時点でベース地図は既定のスタイルのままです。次の Step 3: 地図スタイルの適用 で、地図全体のスタイルを差し替えます。