応用
ハウツー 値に応じてエリアを色分けするには（コロプレス）
人口や売上のような数値を、エリア（ポリゴン）の色の濃淡で見せる地図をコロプレスと呼びます。ポリゴンの GeoJSON に数値プロパティを持たせ、値から色への対応を式で書きます。
データの用意
各ポリゴンの properties に数値（ここでは value）を持たせた GeoJSON を用意します。
{
"type": "Feature",
"geometry": { "type": "Polygon", "coordinates": [ ... ] },
"properties": { "name": "エリアA", "value": 72 }
}コード
読み込みを待ってから、fill レイヤの fill-color に interpolate 式を書いて重ねます。
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.665, lng: 139.725 },
zoom: 12,
});
await map.whenReady();
const impl = map.getGeoloniaMap();
impl.addSource("areas", { type: "geojson", data: "/data/areas.geojson" });
impl.addLayer({
id: "areas",
type: "fill",
source: "areas",
paint: {
"fill-color": [
"interpolate", ["linear"], ["get", "value"],
0, "#ffffcc",
50, "#fd8d3c",
100, "#bd0026",
],
"fill-opacity": 0.75,
"fill-outline-color": "#ffffff",
},
});interpolate 式の読み方は、
["linear"]：値の間を直線的に補間する。["get", "value"]：各ポリゴンのproperties.valueを取り出す。- 以降は「値, 色」のペア。
0なら薄い黄色、100なら濃い赤、その間は連続的に変化します。
fill-opacity を 1 未満にしておくと、下の地図（道路や地名）が透けて位置が分かります。
データは geojson で、塗り分けに使うプロパティと色は choropleth で <Map> へ渡します。
import "maplibre-gl/dist/maplibre-gl.css";
import "@geolonia/maps-core/css";
import { createRoot } from "react-dom/client";
import { Map } from "@geolonia/maps-react";
import { setWorkerUrl } from "maplibre-gl";
import workerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url";
setWorkerUrl(workerUrl);
createRoot(document.getElementById("root")).render(
<Map
apiKey="YOUR-API-KEY"
center={[139.725, 35.665]}
zoom={12}
containerStyle={{ width: "100%", height: "100vh" }}
geojson="/data/areas.geojson"
choropleth={{
property: "value",
colors: ["#ffffcc", "#fd8d3c", "#bd0026"],
range: [0, 100],
}}
/>,
);choropleth に指定する値は次のとおりです。
property：塗り分けに使うプロパティ名。値が数値の地物だけを塗り分けます。colors：値の小さい側から大きい側へ並べた色。rangeの範囲に等間隔で割り当て、間は補間します。上の例では0が薄い黄色、50がオレンジ、100が濃い赤です。range：色を割り当てる値の範囲[最小, 最大]。省略するとデータの最小値と最大値を使います。
塗りの不透明度は 0.7 なので、下の地図（道路や地名）が透けて位置が分かります。プロパティ名だけを choropleth="value" と渡すと、既定の色で塗り分けます。
geojson と choropleth は、地図を作るときに一度だけ読まれます。後から変えるときは、<Map> に key を付けて作り直してください。
結果
上のコードは、それぞれのタブの下でそのまま動いています（データはサンプルの /data/areas.geojson）。値の小さいエリアは薄く、大きいエリアは濃く塗り分けられます。凡例を添える場合は、式に書いた「値, 色」のペアをそのまま使うと一致します。
うまくいかないとき
- 全部同じ色になる → プロパティ名のつづり（
value）と、値が数値型であることを確認。"72"のような文字列だと式が効きません。 - 一部のエリアだけ黒っぽくなる → そのポリゴンにプロパティが欠損しています。データ側で埋めるか、
["coalesce", ["get", "value"], 0]のように既定値を与えます。 - 何も出ない →
Layerのidの書き忘れ、または GeoJSON の 404 を確認。