はじめに
弊社の記事では、いろいろな地図ライブラリでGeoJSONのポリゴンを表示してきました。今回は、Leafletを用いて地図上に町丁目ポリゴンを表示し、人口総数によって色分けを行いたいと思います。
表示する町丁目ポリゴン（GeoJSON）
人口総数を属性に持つ町丁目ポリゴンについては、TerraMap APIから取得できるものを利用しました。
一部省略しておりますが、以下のようなGeoJSONファイルになります。
features[0].properties.data[0].value が人口総数の値になっています。
ChoPolygon.geojson
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"area": {
"area": 0.23232962656232412
},
"data": [
{
"is_authorized": true,
"stat_item_id": 15776,
"stat_id": "001012000",
"value": "1301"
}
],
"point_coordinates": [
139.67882,
35.662
],
"geocode": "13110000104",
"points": [
[
"東京都",
"目黒区",
"駒場４丁目"
]
]
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
139.674866628,
35.664159828
],
[
139.675069068,
35.664075835
],
.... 座標を省略しています
]
]
]
}
},
.... featureを省略しています
]
}
HTML
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>
Leafletで地図に町丁目ポリゴンを表示し、人口総数で色分けを行ってみる
</title>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<div id="map" style="width: 100%; height: 95vh"></div>
<script src="./index.js"></script>
</body>
</html>
参考情報
https://leafletjs.com/examples/quick-start/
ポリゴン表示まで
OpenStreetMapの地図上に町丁目ポリゴンを表示し、クリックすることで人口総数をPopup表示させます。JavaScriptのコードは以下のようになります。
index.js
const map = L.map("map").setView([35.6727, 139.662], 13);
// 背景地図はOpenStreetMap
const tiles = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
// GeoJSONのスタイル
const geoJsonStyle = {
color: "#7a7a7a",
fillColor: "#9a9a9a",
fillOpacity: 0.5,
};
// onEachFeatureオプションを利用して属性データをPopup表示できるようにする
function onEachFeature(feature, layer) {
// 属性データはfeature.propertiesの構成に従って参照する必要があります
const prop = `住所：${feature.properties.points[0].join("")}<br>人口：${
feature.properties.data[0].value
}`;
layer.bindPopup(prop);
}
// GeoJSONの内容を取得
fetch(`ChoPolygon.geojson`)
.then((response) => response.json())
.then((data) => {
// GeoJSONのレイヤー
L.geoJSON(data, {
style: geoJsonStyle,
onEachFeature, // 上記関数とリンク
}).addTo(map);
});
表示結果
参考情報
https://leafletjs.com/examples/geojson/
ポリゴンの色付け
続きまして、人口総数の値によってポリゴンの色分けを行います。基本的には Interactive Choropleth Map を参考にして作成しました。
index.jsのgeoJsonStyle宣言部分を以下のように差し替えます。
// 人口総数による配色
function getColor(d) {
return d > 7000
? "#800026"
: d > 6000
? "#BD0026"
: d > 5000
? "#E31A1C"
: d > 4000
? "#FC4E2A"
: d > 3000
? "#FD8D3C"
: d > 2000
? "#FEB24C"
: d > 1000
? "#FED976"
: "#FFEDA0";
}
// GeoJSONのスタイル
function geoJsonStyle(feature) {
return {
fillColor: getColor(feature.properties.data[0].value),
weight: 1,
opacity: 1,
color: "white",
dashArray: "3",
fillOpacity: 0.7,
};
}
表示結果
凡例作成
Interactive Choropleth Map に倣って凡例も作成してみます。index.jsの末尾に以下コードを追記します。
const legend = L.control({ position: "bottomright" });
legend.onAdd = function () {
const div = L.DomUtil.create("div", "info legend");
const grades = [0, 1000, 2000, 3000, 4000, 5000, 6000, 7000];
const labels = [];
for (let i = 0; i < grades.length; i++) {
const from = grades[i];
const to = grades[i + 1];
labels.push(
`<i style="background:${getColor(from + 1)}"></i> ${from}${
to ? `–${to}` : "+"
}`
);
}
div.innerHTML = labels.join("<br>");
return div;
};
legend.addTo(map);
CSSファイルにも以下の記述を行います。
style.css
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.legend {
text-align: left;
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
完成画像
全体が上手くいくと、以下のような表示結果になります。
記事は以上になります。
最後まで読んでいただきましてありがとうございます。