はじめに

地図上にデータを重ねて確認したいと思ったことはありませんか？
ZENRIN Maps APIでは、詳細な建物名やマンション名などが記載されたゼンリン住宅地図に、さまざまなデータを重ねて表示することが可能です。
主に不動産業務などで利用される情報ですが、ZENRIN Maps APIでは以下のデータを重畳することができます。

今回はこの中から、「ブルーマップ」をゼンリン住宅地図に重ねて表示する方法をご紹介します。
初めてAPIを扱う方でも迷わず試せるよう、コード付き順を追って丁寧に解説しています。

この記事でできること

ZENRIN Maps APIの住宅地図を表示する
ブルーマップを住宅地図に重畳する

APIキーの取得

ZENRIN Maps API を利用するには、事前に APIキーの取得が必要です。
現在、ZENRIN Maps API は 2か月間の無料トライアルが用意されており、期間中は主要な機能を実際にお試しいただけます。
開発や評価の初期段階でも安心してご利用いただけます。
APIキーの取得方法については、以下の記事で詳しく解説されています。
初めての方は、まずこちらをご覧いただき、APIキーの発行と設定を行ってください。

ZENRIN Maps APIの始め方

実装の概要

ベースマップとしてZENRIN Maps APIの住宅地図を表示
トグルスイッチでブルーマップ（WMSレイヤ）をON/OFF表示
地図の移動やズーム操作に合わせて再描画

ディレクトリ構成（例）

project/
├── index.html
├── js/
│   └── zma_bluemap.js
└── css/
    └── style.css

1. HTMLファイルの作成

以下の内容を index.html に保存してください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ブルーマップ表示</title>
    <script src="https://{DOMAIN}/zma_loader.js?key=あなたのAPIキー&auth=[認証方式]"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div id="ZMap" style="width: 100%; height: 600px;"></div>

    <div id="selectBox">
      <div class="toggle">
        <input class="toggle-button" type="checkbox" id="bluemap" name="switch1">
        <label class="toggle-label" for="switch1">ブルーマップ</label>
      </div>
    </div>

    <script src="js/zma_bluemap.js"></script>
  </body>
</html>

ポイント

地図を表示するための <div id="ZMap">を設置
チェックボックスによりブルーマップの表示切替を行います

2. JavaScriptファイルの作成

以下のコードを js/zma_bluemap.js に保存してください。

zma_bluemap.js

let map;
let layer = {'bluemap': null};

ZMALoader.setOnLoad(function (mapOptions, error) {
  if (error) {
    console.error(error)
    return
  }

  const lat = 35.680983, lng = 139.770516;
  const mapElement = document.getElementById('ZMap');
  mapOptions.center = new ZDC.LatLng(lat, lng);
  mapOptions.zoom = 20;
  mapOptions.mouseWheelZoom = false;
  mapOptions.touchPinchZoom = false;
  mapOptions.zipsMapType = 'Ai3Y2Jwp'; // 住宅地図デザイン

  map = new ZDC.Map(mapElement, mapOptions, function() {
    map.addControl(new ZDC.ZoomButton('top-right'));
    map.addControl(new ZDC.Compass('top-right'));
    map.addControl(new ZDC.ScaleBar('bottom-left'));

    $('.toggle-button').on("click", function() {
      toggleDisabled($(this).prop("checked"));
      drawLayer(this);
    });

    map.addEventListener('scrollend', redrawLayer);
    map.addEventListener('zoom_changed', redrawLayer);
  });
});

const setLayer = (target) => {
  size = map.getMapSize();
  params = {
    'VERSION': '1.3.0',
    'REQUEST': 'GetMap',
    'LAYERS': 'lp1,ll1,lc1,lw1',
    'CRS': 'EPSG:3857',
    'BBOX': getBBOX(),
    'WIDTH': size.width,
    'HEIGHT': size.height,
    'FORMAT': 'image/png',
    'INFO_FORMAT': 'application/json'
  }

  xhr = new XMLHttpRequest();
  xhr.open('POST', `https://test-web.zmaps-api.com/map/wms/${target}`);
  xhr.setRequestHeader('x-api-key', 'あなたのAPIキー');
  xhr.setRequestHeader('Authorization', '認証方式');
  xhr.setRequestHeader('Referer', `${location.protocol}//${location.host}`);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.responseType = 'blob';
  xhr.onload = function(e){
    if (this.status == 200) {
      var widget = new ZDC.UserWidget(
        map.getLatLngBounds().getNorthWest(),
        {
          htmlSource: `<img id="layer_${target}" src="">`,
          propagation: true
        }
      );
      map.addWidget(widget);
      layer[target] = widget;
      (document.getElementById(`layer_${target}`)).src = (window.URL || window.webkitURL).createObjectURL(this.response);
      toggleDisabled(false);
    };
  }
  xhr.send(new URLSearchParams(params));
}

const toggleDisabled = (flag) => {
  $.each($('.toggle-button'), function(idx, target){
    $(target).prop('disabled', flag);
  });
}

const drawLayer = (target) => {
  if($(target).prop("checked")){
    setLayer($(target).attr('id'));
  } else {
    map.removeWidget(layer[$(target).attr('id')]);
  }
}

const redrawLayer = () => {
  for (const target of $('.toggle-button')){
    if($(target).prop("checked")) drawLayer(target);
  }
}

const getBBOX = () => {
  bound = map.getLatLngBounds();
  p1 = bound.getSouthWest();
  p2 = bound.getNorthEast();

  p1 = map.latlngToWebMercator(p1);
  p2 = map.latlngToWebMercator(p2);
  return p1.concat(p2).join(',');
}

ポイント

setLayer() 関数でWMSリクエストを発行
トグルスイッチでON時にレイヤ追加、OFF時に削除
getBBOX() で現在表示領域の緯度経度を取得

スタイルの調整（任意）

css/style.css にチェックボックスの見た目を整えるCSSを記述することで、より分かりやすいUIにすることもできます。

style.css

body {margin: 0; padding: 0;}
#ZMap {position: absolute; top: 0; bottom: 0; width: 100%;}

#selectBox {
  position: absolute;
  left: 20px;
  bottom: 40px;
  border: 1px solid #3d3d3d;
  background-color: #fff;
  z-index: 100;
  padding: 10px 20px;
}

.toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}
.toggle-label {
  cursor: pointer;
  margin-left: 10px;
}
.toggle-button {
  position: relative;
  width: 60px;
  height: 30px;
  margin: 0;
  vertical-align: top;
  background: #ffffff;
  border: 1px solid #bbc1e1;
  border-radius: 30px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: all 0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2);
}
.toggle-button::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1.5px;
  width: 25px;
  height: 25px;
  background-color: #95b95e;
  border-radius: 50%;
  transform: translateX(0);
  transition: all 0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2);
}
.toggle-button:checked::after {
  transform: translateX(calc(100% + 3px));
  background-color: #fff;  
}
.toggle-button:checked {
  background-color: #95b95e;
}
.toggle-button:disabled {
  opacity: 0.6;
}

コードを実行した結果は、下記となります。

公式リファレンス

参考にしたQiita記事

ZENRIN Maps APIで小学校区、中学校区を表示してみた

おわりに

ブルーマップは、建物の位置や名称を細かく確認できる便利な地図レイヤです。
業務での施設管理や、自治体の防災対策など、さまざまなシーンで活用が期待できます。

今回はブルーマップでの一例をご紹介させていただきましたが、ZENRIN Maps APIでは用途地域や路線価、小中学校区といった他のデータも地図上に重ねて表示できます。
業務の目的に応じて、ぜひカスタマイズしてご活用ください。