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