MapLibreで能登半島近辺のハザードマップを作る

MapLibreとは？
背景地図の設定
オーバーレイの追加
サンプルコード

MapLibreとは？

オープンソースの地図描画ライブラリ。
リアルタイムでインタラクティブなマップを表示するのに適しています。
災害リスク情報を地図に重ねて、リスク管理や意思決定を支援します。
今回は、能登半島周辺を中心にハザードマップを作成します。

背景地図の設定

まず、MapLibreで背景地図を設定します。
淡色地図や航空写真など、複数の地図スタイルを選べます。
背景地図は、災害リスク情報を重ねるための基本地図です。
淡色地図は、シンプルに道路や地形を表示して、災害情報の視認性を向上させます。
航空写真は、実際の地形や建物の状態を確認するのに便利です。

オーバーレイの追加

オーバーレイとは、背景地図に重ねて表示する追加情報です。
ハザードマップには、例えば洪水や津波の浸水区域をオーバーレイとして表示できます。
透明度を調整することで、背景地図とオーバーレイの情報が調和します。
今回の例では「洪水浸水想定区域（最大浸水深）」を表示しています。

サンプルコード

以下のコードを使用して、能登半島近辺のハザードマップを作成できます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>表示/非表示切り替え</title>
    <meta name="description" content="sample" />
    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      html, body, #map {
        height: 100%;
      }
      #layerControl {
        position: absolute;
        top: 20px;
        left: 20px;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        border-radius: 3px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="layerControl">
      <span>背景地図: </span>
      <select name="layer-control" onChange="changeMap(this.value)">
        <option value="pale-layer">淡色地図</option>
        <option value="photo-layer">写真</option>
        <option value="std-layer">標準地図</option>
      </select>
      <br>
      <span>オーバーレイ: </span>
      <select name="overlay-control" onChange="changeOverlay(this.value)">
        <option value="none">なし</option>
        <option value="flood-layer">洪水浸水想定区域</option>
        <option value="tsunami-layer">津波浸水想定区域</option>
      </select>
    </div>

    <script>
      const map = new maplibregl.Map({
        container: 'map',
        center: [137.0, 37.0],
        zoom: 9,
        style: {
          version: 8,
          sources: {
            pale: {
              type: 'raster',
              tiles: ['https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png'],
              tileSize: 256,
              attribution: "地図の出典：国土地理院",
            },
            photo: {
              type: 'raster',
              tiles: ['https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg'],
              tileSize: 256,
              attribution: "地図の出典：国土地理院",
            },
            std: {
              type: 'raster',
              tiles: ['https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'],
              tileSize: 256,
              attribution: "地図の出典：国土地理院",
            },
            flood: {
              type: 'raster',
              tiles: ['https://disaportaldata.gsi.go.jp/raster/01_flood_l2_shinsuishin_data/{z}/{x}/{y}.png'],
              tileSize: 256,
              attribution: "洪水浸水想定区域：国土地理院",
            },
            tsunami: {
              type: 'raster',
              tiles: ['https://disaportaldata.gsi.go.jp/raster/04_tsunami_newlegend_data/{z}/{x}/{y}.png'],
              tileSize: 256,
              attribution: "津波浸水想定区域：国土地理院",
            },
          },
          layers: [
            { id: 'pale-layer', type: 'raster', source: 'pale' },
            { id: 'photo-layer', type: 'raster', source: 'photo', layout: { visibility: 'none' } },
            { id: 'std-layer', type: 'raster', source: 'std', layout: { visibility: 'none' } },
            { id: 'flood-layer', type: 'raster', source: 'flood', layout: { visibility: 'none' }, paint: { 'raster-opacity': 0.5 } },
            { id: 'tsunami-layer', type: 'raster', source: 'tsunami', layout: { visibility: 'none' }, paint: { 'raster-opacity': 0.5 } }
          ],
        },
      });

      function changeMap(selectedMap) {
        ['pale-layer', 'photo-layer', 'std-layer'].forEach(layer => {
          map.setLayoutProperty(layer, 'visibility', layer === selectedMap ? 'visible' : 'none');
        });
      }

      function changeOverlay(selectedOverlay) {
        ['flood-layer', 'tsunami-layer'].forEach(layer => {
          map.setLayoutProperty(layer, 'visibility', layer === selectedOverlay ? 'visible' : 'none');
        });
      }
    </script>
  </body>
</html>