ZENRIN Maps API の住宅地図にハザードマップを重畳してみた

概要

本記事では、ZENRIN Maps API の地図 を使用して特定の地点における災害情報（洪水、土砂崩れ、津波）の地図を表示し、ユーザーがそれらのレイヤーを簡単に切り替えることができるインタラクティブな地図を実装しました。この地図は、ZMALoader ライブラリを活用して、指定された位置（東京駅）を中心に表示されます。また、複数の災害情報をレイヤーとして重ね合わせ、その表示/非表示をボタンで切り替えられるようにしています。

📖 出典

本記事で使用するハザードデータはハザードマップポータルサイトより取得した公共データを基にしています。

※本データは「公共データ利用規約（PDL1.0）」のもとで提供されており、再配布・改変が可能です。

📌 対象読者

• 防災情報を可視化したい開発者
• ZENRIN Maps API を活用した地図アプリを開発したい方
• JavaScript で地図 API を扱う方法を学びたい方

ZENRIN Maps API キーの取得

ZENRIN Maps API

１．検証用 ID とパスワード（PW）取得

ZENRIN Maps API を利用するには、検証用 ID とパスワード（PW）を取得し、API キーを取得する必要があります。以下のリンクから申請・取得を行ってください

ZENRIN Maps API 　無料お試し ID 　お申込みフォーム

コンソール

ZENRIN Maps API リファレンス

📜 コード解説

1. 必要なスクリプトの読み込み

Zenrin の地図 API を読み込み、key と auth パラメータを指定します。

hazard_Map.html

<script src="https://test-js.zmaps-api.com/zma_loader.js?key=[APIキー]&auth=referer"></script>

2. Zenrin Map の初期化

地図の中心を設定し、コントロール（ズームボタン・スケールバー・センターマーカー）を追加します。

// 地図を初期化する関数
function initMap() {
  ZMALoader.setOnLoad(function (mapOptions, error) {
    if (error) return console.error(error);

    // 地図の中心座標を設定（東京駅）
    mapOptions.center = new ZDC.LatLng(lat, lng);
    mapOptions.mouseWheelReverseZoom = true;
    mapOptions.minZoom = 2;
    mapOptions.maxZoom = 17;
    mapOptions.zoom = 8;

    // 地図のタイプ（ZipsMapType）を指定
    mapOptions.zipsMapType = "Ai3Y2Jwp";

    // マウスホイールでズームするときのズーム量を指定
    mapOptions.mouseWheelZoomAmount = 0.2;

    map = new ZDC.Map(
      document.getElementById("ZMap"),
      mapOptions,
      function () {
        map.addControl(new ZDC.ZoomButton("top-right"));
        map.addControl(new ZDC.ScaleBar("bottom-left"));
        const center_mrk = new ZDC.CenterMarker();
        map.addControl(center_mrk);
      },
      function () {
        console.error("Failed to load map");
      }
    );
  });
}

3. 災害レイヤーの設定

次に、洪水、土砂崩れ、津波の各災害情報を表示するレイヤーを作成します。これらのレイヤーは、ZDC.ImageLayer を使って画像として表示されます。各レイヤーは、指定された URL パターンに従って画像を取得し、地図上に表示します。

ZDC.ImageLayer を使用した画像レイヤーの追加

詳細な情報については、ZDC.ImageLayer の公式リファレンス をご覧ください。

floodLayer = new ZDC.ImageLayer(
  "https://disaportaldata.gsi.go.jp/raster/01_flood_l2_shinsuishin_kuni_data/{z}/{x}/{y}.png",
  { opacity: 0.9, maxNativeZoom: 17 }
);

landslideLayer = new ZDC.ImageLayer(
  "https://disaportaldata.gsi.go.jp/raster/05_kyukeishakeikaikuiki/{z}/{x}/{y}.png",
  { opacity: 0.9, maxNativeZoom: 17 }
);

tsunamiLayer = new ZDC.ImageLayer(
  "https://disaportaldata.gsi.go.jp/raster/04_tsunami_newlegend_data/{z}/{x}/{y}.png",
  { opacity: 0.9, maxNativeZoom: 17 }
);

4. レイヤー切り替え

ユーザーが災害レイヤーを表示したり非表示にしたりできるようにするために、toggleLayer 関数を作成しました。この関数は、現在表示されているレイヤーを非表示にし、指定されたレイヤーを表示します。ボタンをクリックすることで、それぞれのレイヤー（洪水、土砂崩れ、津波）をトグルできます。

// 地図のレイヤーを切り替える関数
function toggleLayer(layer) {
  // mapが未定義またはnullの場合は処理を終了
  if (!map) return;

  // 現在表示されているレイヤーがあれば、それを非表示にする
  if (currentVisibleLayer) {
    map.removeWidget(currentVisibleLayer);
    currentVisibleLayer = null;
  }

  // 引数で渡された新しいレイヤーが存在すれば、それを地図に追加する
  if (layer) {
    map.addWidget(layer);
    currentVisibleLayer = layer;
  }
}

5. ユーザーインターフェース

ユーザーが地図上で異なる災害レイヤーを切り替えるためのボタンを表示します。これらのボタンは、それぞれの災害に対応した色とラベル（洪水、土砂崩れ、津波）で表示され、クリックすることで対応するレイヤーを表示・非表示にします。

<div id="controlPanel">
  <button class="toggleButton floodButton" onclick="toggleFlood()">
    洪水 (Flood)
  </button>
  <button class="toggleButton landslideButton" onclick="toggleLandslide()">
    土砂崩れ (Landslide)
  </button>
  <button class="toggleButton tsunamiButton" onclick="toggleTsunami()">
    津波 (Tsunami)
  </button>
</div>

6.ボタンスタイル

各ボタンには、色分けされたスタイルを設定し、ユーザーが視覚的にどの災害に対応したボタンであるかを区別できるようにしています。

.floodButton {
  background: #e34633;
}
.floodButton:hover {
  background: #c03222;
}
.landslideButton {
  background: #007bff;
}
.landslideButton:hover {
  background: #0056b3;
}
.tsunamiButton {
  background: #6f42c1;
}
.tsunamiButton:hover {
  background: #5a3796;
}

地図表示

洪水

土砂崩れ

津波

📝 結論

本記事では、ZENRIN Maps API を使用して、地図上に洪水、土砂崩れ、津波などの災害情報を重畳表示するインタラクティブな地図の作成方法を解説しました。ZENRIN Maps API を活用することで、災害データの表示を簡単に実装でき、地図上で視覚的に情報を管理することが可能です。