maps-react

チュートリアル段3：見た目を変える

前の段でできたこと

段2で、5地点のデータを地図に載せました。でも全部同じ色。データには category（ターミナル／観光）が入っているので、この段では属性に応じて点を色分けします。

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" ...>

動いたか確認する

駅の3点が赤、観光地の2点が青で表示されていれば成功です。GeoJSON の category の値を書き換えて、色が追従することも確かめてください。

うまくいかないとき

全部フォールバックの色になる → match に書いた値と、GeoJSON の properties の値が完全一致しているか確認。全角と半角の違いや、余分な空白にも注意。
何も出なくなった → match 式のフォールバック（最後の1つ）を書き忘れると式が不正になります。必ず末尾に既定の色を置いてください。
プロパティ名を間違えるとエラーは出ずに反映されません（circle-colour 等のつづりに注意）。

次は

データが色で語るようになりました。次の段4：インタラクションを足すで、クリックでポップアップを出すインタラクションを追加します。