maps-react

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

この Step の前提

Step 1 を終えて、地図の場所と視点を指定できる状態から始めます。この時点で表示されているのは中心の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 と同じ [経度, 緯度] の順です。
properties：名前や分類など、地物に付与する属性。ここでは name と category を指定しています（category は次の Step で使用します）。

データを地図に重ねる

maps-react では、データも JSX で宣言します。Map の子要素として Source（データ）を配置し、その中に Layer（描画方法）を配置します。

import "maplibre-gl/dist/maplibre-gl.css";
import "@geolonia/maps-core/css";
import { createRoot } from "react-dom/client";
import { Layer, Map, Source } from "@geolonia/maps-react";

createRoot(document.getElementById("root")).render(
  <Map
    apiKey="YOUR-API-KEY"
    center={[139.75, 35.68]}
    zoom={11}
    containerStyle={{ width: "100%", height: "100vh" }}
  >
    <Source id="spots" type="geojson" data="/data/sample-spots.geojson">
      <Layer id="spots" type="circle" />
    </Source>
  </Map>,
);

<Source>：データの供給元。type="geojson" を指定し、data に GeoJSON の URL またはオブジェクトそのものを渡します。
<Layer>：データの描画方法。type="circle" は各点を円として描画します。id は必須です。省略した場合、エラーは出ずにレイヤが追加されず、何も表示されません。

動いたか確認する

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

うまくいかないとき

何も表示されずエラーも出ない → 原因の多くは <Layer> の id の指定漏れです。必ず id を指定してください。
点が海や別の大陸に出る → coordinates で経度と緯度が逆になっています。[経度, 緯度] の順に修正します。
それでも表示されない → ブラウザの開発者ツール（ネットワークタブ）で GeoJSON のレスポンスを確認。原因の多くは 404 と JSON の文法エラーです。

次の Step

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