MapLibre GL JSを使ってGeoJSONファイルを読み込み町丁目ポリゴンを表示させる #JavaScript

概要説明

MapLibre GL JSを使って地図上にGeoJsonファイルを読み込み町丁目ポリゴンを表示させてみました。この記事はMapbox GL JSを使って町丁目ポリゴンを表示してみるのMapLibre版です。

使用したもの

MapLibre GL JS

オープンソースのJavaScript地図ライブラリです。
当初はMapbox GL JS v1.13.0のフォークという位置付けでしたが、現在は独自路線へシフトし、ベクトルタイルを中心としたWeb地図のエコシステムを担うようになっています。
Mapbox GL JSとほぼ同じようにコードを書くことができます。またMapLibre GL JSではアクセストークンが不要であるため導入しやすさといった点でメリットがあります。

OpenStreetMapのベクトルタイル

今回の背景地図として使用しました。

GeoJSONファイル

「GeoJSONは、JavaScript Object Notation (JSON) を基とした、GISデータを記述するためのフォーマットです」（出典：© GIS Open Educational Resources WG, CC BY-NC-SA 4.0, https://gis-oer.github.io/gitbook/book）
今回はマップマーケティングのTerraMap APIを使って取得したGeoJSONファイルを読み込み町丁目のポリゴンを表示させてみます。

GeoJSONのサンプル

PolygonSample.geojson

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "MultiPolygon",
        "coordinates": [
          [
            [
              [139.671072468309, 35.6754722538532],
              [139.671087007596, 35.6754550551174],
              [139.668725237444, 35.6747911158284],
              [139.66554532739, 35.6738722390156],
              [139.661458826632, 35.6726940785978],
              [139.661419450899, 35.6728515474483],
              [139.661380744908, 35.6729374755436],
              [139.661480105109, 35.6731778572129],
              [139.66170271628, 35.6734877305997],
              [139.661785304978, 35.6736513662652],
              [139.661614923065, 35.6742875722041],
              [139.661496199963, 35.6743809219931],
              [139.661459656333, 35.674408792621],
              [139.662425327479, 35.674739902115],
              [139.666544090416, 35.6762483359339],
              [139.667841199021, 35.6766982910352],
              [139.670456339457, 35.6776512122706],
              [139.670879431702, 35.6757305691137],
              [139.670937715062, 35.6756316424419],
              [139.671072468309, 35.6754722538532]
            ]
          ]
        ]
      }
    }
  ]
}

Visual Studio Code & Live Server

Visual Studio Codeとは、ほぼすべての言語で動作し、任意の OS で実行される強力なコードエディターです。
Live Serverは、Visual Studio Codeの拡張機能でHTTPサーバーを起動することができます。
ローカルのhtmlファイルを直接ブラウザで表示すると、GeoJSONファイルを読み込む際にCORS（Cross-Origin Resource Sharing）のエラーが発生するため、Visual Studio CodeのLive Serverを使用してローカルのGeoJSONファイルを読み込むようにしました。

ソース構成

最終的なソース構成は以下になります。

.
├── index.html
├── index.js
└── PolygonSample.geojson

地図の表示

はじめにMapLibre GL JSのクイックスタートのサンプルを元にHTMLファイルとJavaScriptファイルを作成し、地図を表示させてみました。

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.js"></script>
    <link
      href="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.css"
      rel="stylesheet"
    />
    <div id="map" style="width: 100%; height: 700px"></div>
  </head>
  <body>
    <div id="map"></div>
    <script src="./index.js"></script>
  </body>
</html>

index.js

const map = new maplibregl.Map({
  container: "map", // container id
  style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // style URL
  center: [139.662, 35.6727], // starting position [lng, lat]
  zoom: 15, // ズームレベル
});

表示結果

GeoJSONファイルを読み込み町丁目ポリゴンを表示

続いてJavaScriptファイルに以下のコードを追加してGeoJSONファイルを読み込み、地図上に町丁目のポリゴンを表示させてみます。

index.js

map.on("load", () => {
  map.addSource("PolygonSample", {
    type: "geojson",
    data: "PolygonSample.json",
  });
  // ポリゴンの背景色を設定します
  map.addLayer({
    id: "polygon",
    type: "fill",
    source: "PolygonSample",
    layout: {},
    paint: {
      "fill-color": "#99CCFF",
      "fill-opacity": 0.5,
    },
  });
  // ポリゴンの枠線を設定します
  map.addLayer({
    id: "outline",
    type: "line",
    source: "PolygonSample",
    layout: {},
    paint: {
      "line-color": "#000080",
      "line-width": 2,
    },
  });
});