はじめに

今回は、Google Map上にGeoJSON形式の町丁目ポリゴンを表示し、人口総数によって色分けを行い、色分けの凡例も作成したいと思います。

前提条件

Google Mapを表示するには、Google Maps Platform用のAPIキーが必要となります。この記事では「Google Cloudプロジェクトをセットアップする」や「APIキーを使用する」等の手順は割愛させていただきます。

町丁目ポリゴン（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

HTMLファイルは以下のようになりました。"YOUR_GOOGLE_MAP_API_KEY" の部分にはAPIキーの入力が必要になります。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>
      Google Map上に町丁目ポリゴンを表示し、人口総数での色分けを行ってみる
    </title>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map" style="width: 100%; height: 95vh"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "YOUR_GOOGLE_MAP_API_KEY", v: "weekly"});</script>
  </body>
</html>

JavaScript

JavaScriptのコードは以下のようになります。GeoJSONファイルを読み込み、ポリゴンを単色で表示させています。

index.js

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");
  // 中心位置
  const centerLocation = { lat: 35.6727, lng: 139.662 };

  map = new Map(document.getElementById("map"), {
    center: centerLocation,
    zoom: 13,
  });

  // GeoJsonをロード
  map.data.loadGeoJson("ChoPolygon.geojson");

  // ポリゴンのスタイル設定
  const polygonStyleOptions = {
    strokeColor: "#810FCB",
    strokeOpacity: 1.0,
    strokeWeight: 0.5,
    fillColor: "#810FCB",
    fillOpacity: 0.5,
  };

  map.data.setStyle((feature) => {
    if (feature.getGeometry().getType() === "MultiPolygon") {
      return polygonStyleOptions;
    }
    return null;
  });
}

initMap();

表示結果

参考情報
Simple Map | Maps JavaScript API | Google for Developers
データレイヤ | Maps JavaScript API | Google for Developers

人口総数での色分け

続いて、人口総数の値によって色分けを行いたいと思います。
index.jsにおいて、以下の２つの関数を let map; の後に宣言します。

// 人口総数による配色
function getColor(d) {
  return d > 7000
    ? "#8b0000"
    : d > 6000
    ? "#d7352b"
    : d > 5000
    ? "#ffa746"
    : d > 4000
    ? "#ffd976"
    : d > 3000
    ? "#c9d0bb"
    : d > 2000
    ? "#92c7ff"
    : d > 1000
    ? "#5b97ee"
    : "#0855c4";
}

// フィーチャの人口総数に応じたスタイル設定を取得
function getPolygonStyleOptions(feature) {
  return {
    strokeColor: "black",
    strokeOpacity: 1.0,
    strokeWeight: 0.5,
    fillColor: getColor(feature.getProperty("data")[0].value),
    fillOpacity: 0.5,
  };
}

map.data.setStyleで使用するのは、関数のgetPolygonStyleOptionsに切り替えます。

  map.data.setStyle((feature) => {
    if (feature.getGeometry().getType() === "MultiPolygon") {
      return getPolygonStyleOptions(feature);   //関数を利用
    }
    return null;
  });

表示結果

カスタム凡例の表示

最後は色分けに対してのカスタム凡例を加えて、完成になります。
カスタム凡例のチュートリアルを参考にして作成しました。

HTML

index.htmlにカスタム凡例用の <div id="legend"></div> を追加します。

    <div id="map" style="width: 100%; height: 95vh"></div>
    <div id="legend"></div>

JavaScript

index.js の map.data.setStyle 処理の後に、以下のコードを加えます。
チュートリアルとは異なり、<span>タグでアレンジしてみました。

  const legend = document.getElementById("legend");
  const grades = [0, 1000, 2000, 3000, 4000, 5000, 6000, 7000];

  for (let i = 0; i < grades.length; i += 1) {
    const from = grades[i];
    const to = grades[i + 1];

    const div = document.createElement("div");
    div.className = "info";
    div.innerHTML = `<span style="background:${getColor(from + 1)}"></span> ${from}${
      to ? `&ndash;${to}` : "+"
    }`;
    legend.appendChild(div);
  }

  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);

CSS

以下のCSSファイルも加えます。

style.css

#legend {
  font: 12px Arial, Helvetica, sans-serif;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
  margin: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

#legend span {
  width: 15px;
  height: 15px;
  float: left;
  margin-right: 8px;
  opacity: 0.7;
}

#legend .info {
  width: 90px;
  height: 15px;
}

表示結果

全体が上手くいくと、以下のような表示結果となります。

記事は以上になります。ありがとうございました。