maps-react

チュートリアル Step 3: データに応じたスタイルの適用

この Step の前提

Step 2 を終えて、5地点のデータを地図に重ねた状態から始めます。この時点ではすべての点が同じ色です。データは category（ターミナル、観光）を持っているため、この Step では属性に応じて点を色分けします。

paint プロパティで描き方を決める

<Layer> の描画方法は paint プロパティで指定します。色分けの前に、まず点の大きさと縁取りを指定します。

<Layer
  id="spots"
  type="circle"
  paint={{
    "circle-radius": 8,
    "circle-stroke-width": 2,
    "circle-stroke-color": "#fff",
    "circle-color": "#e4402f",
  }}
/>

circle-radius：丸の半径（ピクセル）。
circle-stroke-width / circle-stroke-color：縁取りの太さと色。白い縁取りを付けると、地図上で点を判別しやすくなります。
circle-color：塗りの色。

データの属性で色を変える

circle-color には、固定の色のほかに式を指定できます。match 式は、category の値と色の対応表として機能します。

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"
        paint={{
          "circle-radius": 8,
          "circle-stroke-width": 2,
          "circle-stroke-color": "#fff",
          "circle-color": [
            "match",
            ["get", "category"],
            "ターミナル", "#e4402f",
            "観光", "#2b6cb0",
            "#888888",
          ],
        }}
      />
    </Source>
  </Map>,
);

配列の各要素の意味は次のとおりです。

"match"：対応表を引く式。
["get", "category"]：各地点の properties.category の値を取り出す。
"ターミナル", "#e4402f"：値が「ターミナル」なら赤。
"観光", "#2b6cb0"：値が「観光」なら青。
"#888888"：いずれにも一致しない場合の色（フォールバック。必須です）。

このように、データの属性から描画結果を決定する方式をデータ駆動スタイルと呼びます。色のほか、値に応じて circle-radius を変える（値が大きい点ほど大きく描画する）指定もできます。

ベース地図ごと変えるには

点の色ではなく、背景の地図そのものを変更する場合は、Map の style プロパティにスタイル名または URL を指定します。

<Map apiKey="YOUR-API-KEY" style="geolonia/midnight" ...>

geolonia/midnight は Geolonia が提供する標準スタイルの1つです。利用できるスタイルは Geolonia Maps のスタイル一覧に実際の地図とあわせて掲載しています。スタイルという仕組みについては地図のスタイルとはを参照してください。

動いたか確認する

駅の3点が赤、観光地の2点が青で表示されていれば成功です。GeoJSON の category の値を変更し、色が追従することも確認してください。

うまくいかないとき

すべてフォールバックの色になる → match に記述した値と GeoJSON の properties の値が完全一致しているか確認。全角と半角の違い、および余分な空白にも注意が必要です。
何も表示されなくなった → match 式のフォールバック（末尾の1要素）が欠けていると式が不正になります。末尾には必ず既定の色を指定してください。
プロパティ名が誤っている場合、エラーは出ずに指定が無視されます（circle-colour などのつづりに注意）。

次の Step

以上で、データに応じたスタイルの適用は完了です。次の Step 4: イベント処理とポップアップで、クリックに応じてポップアップを表示します。