maps-suite

チュートリアル Step 2: GeoJSON データの追加

この Step の前提

Step 1 を終えて、地図の場所と視点を指定できる状態から始めます。この Step では、複数の地点データを地図に重ねます。

GeoJSON を知る

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

このチュートリアルでは、東京の5地点を含むサンプルを使用します。次の内容を public/data/sample-spots.geojson として保存してください（Vite の場合、public/ 以下のファイルは /data/... の URL で配信されます）。

{
  "type": "FeatureCollection",
  "features": [
    { "type": "Feature", "geometry": { "type": "Point", "coordinates": [139.767125, 35.681236] }, "properties": { "name": "東京駅", "category": "ターミナル" } },
    { "type": "Feature", "geometry": { "type": "Point", "coordinates": [139.700258, 35.690921] }, "properties": { "name": "新宿駅", "category": "ターミナル" } },
    { "type": "Feature", "geometry": { "type": "Point", "coordinates": [139.701636, 35.658034] }, "properties": { "name": "渋谷駅", "category": "ターミナル" } },
    { "type": "Feature", "geometry": { "type": "Point", "coordinates": [139.796747, 35.714765] }, "properties": { "name": "浅草寺", "category": "観光" } },
    { "type": "Feature", "geometry": { "type": "Point", "coordinates": [139.745438, 35.658581] }, "properties": { "name": "東京タワー", "category": "観光" } }
  ]
}

geometry：点、線、面などの形状。coordinates は [経度, 緯度] の順です（center の { lat, lng } とは逆順なので注意）。
properties：名前や分類など、地物に付与する属性。ここでは name と category を指定しています（category は次の Step で使用します）。

データを地図に重ねる

データの追加には、Step 1 で触れた getGeoloniaMap() を使用します。これは基盤の地図（MapLibre GL JS）を直接操作するための公開 API であり、maps-suite が提供していない機能はここから呼び出します。手順は、ソース（データ）の登録と、レイヤ（描画方法）の追加の2つです。

GeoJSON を表示するだけであれば map.data による短い記述も使えます。この Step では描画方法まで指定するため、ソースとレイヤを分けて扱います。

import "maplibre-gl/dist/maplibre-gl.css";
import "@geolonia/maps-core/css";
import { geolonia } from "@geolonia/maps-suite";

const map = new geolonia.maps.Map(document.getElementById("map"), {
  apiKey: "YOUR-API-KEY",
  center: { lat: 35.68, lng: 139.75 },
  zoom: 11,
});

await map.whenReady();
const impl = map.getGeoloniaMap();
impl.addSource("spots", { type: "geojson", data: "/data/sample-spots.geojson" });
impl.addLayer({ id: "spots", type: "circle", source: "spots" });

addSource：データの供給元を登録します。type: "geojson" を指定し、data に URL またはオブジェクトそのものを渡します。
addLayer：データの描画方法を追加します。type: "circle" は各点を円として描画します。source には、登録したソースの名前を指定します。
呼び出しの順序：addLayer が参照するソースは、先に addSource で登録しておく必要があります。また、どちらも地図の読み込み完了（whenReady()）より後に呼び出します。

動いたか確認する

地図上に5つの円（東京駅、新宿駅、渋谷駅、浅草寺、東京タワー）が表示されていれば成功です。GeoJSON の内容を任意のデータに差し替え、指定した点が表示されることも確認してください。

うまくいかないとき

「Style is not done loading」のエラー → whenReady() を待たずに addSource と addLayer を呼び出しています。await の記述を確認してください。
点が海や別の大陸に出る → GeoJSON の coordinates で経度と緯度が逆になっています。[経度, 緯度] の順に修正します。
何も表示されずエラーも出ない → ブラウザの開発者ツール（ネットワークタブ）で GeoJSON のレスポンスを確認。原因の多くは 404 と JSON の文法エラーです。

次の Step

以上で、地点データの追加は完了です。この時点ではすべての点が同じ色で描画され、ターミナル駅と観光地を区別できません。各点は category を持っています。次の Step 3: データに応じたスタイルの適用で、属性に応じて色分けします。