2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@zdc_m-sato(佐藤 美咲)in株式会社ゼンリンデータコム

【初心者向け】ZENRIN Maps APIでWMS（XYZ）を重畳した地図を表示する

2
Last updated at Posted at 2025-09-29

はじめに

地図に気象情報やハザードマップなどの外部レイヤーを重ねて表示したいと思ったことはありませんか。
本記事では、ZENRIN Maps API を使って地図に WMS（画像レイヤー）を重ねる方法を、地図の表示から透明度の調整までを段階的に解説します。

初めての方でも、記事の手順に沿って進めれば「地図を表示 → WMS を重畳 → 不透明度を変更」という流れを体験できます。用途に応じた見せ方の第一歩として、ぜひ試してみてください。

この記事でできること

  • ZENRIN Maps APIを使って地図を描画
  • 外部XYZ/WMSタイル（国土地理院）を重畳表示
  • 重畳レイヤーの不透明度の調整

利用した外部データ

APIキー取得手順

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

公式リファレンス

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8"/>
  <title>ZENRIN ImageLayer - Single File</title>
  <style>
    body { margin: 0; font-family: "Yu Gothic","Meiryo",sans-serif; padding:12px; }
    h1 { font-size: 18px; margin: 0 0 8px 0; }
    #ZMap { position: relative; width:100%; height:700px; border:1px solid #777; margin-bottom:8px; }
    #control { width:100%; background:#fafafa; padding:8px; border:1px solid #eee; display:flex; gap:8px; align-items:center; }
  </style>
  <script src="https://test-js.zmaps-api.com/zma_loader.js?key=[APIキー]&auth=referer"></script>
</head>
<body>
  <div id="ZMap"></div>
  <div id="control">
    <label>重畳レイヤーの不透明度</label>
    <input type="range" id="alpha-range" min="0" max="100" value="50" onchange="changeAlphaRange(this)">
    <input type="text" id="alpha-value" value="50" onchange="changeAlphaValue(this)" style="width:40px;">
  </div>

  <script>
    var map = null;
    var imageLayer = null;
    const lat = 35.681406, lng = 139.767132;

    ZMALoader.setOnLoad(function (mapOptions, error) {
      if (error) { console.error('ZMALoader error', error); return; }
      mapOptions.center = new ZDC.LatLng(lat, lng);
      mapOptions.zoom = 12;

      map = new ZDC.Map(
        document.getElementById('ZMap'),
        mapOptions,
        function () {
          imageLayer = new ZDC.ImageLayer(
            'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
            {opacity: 0.5, propagation: true}
          );
          map.addWidget(imageLayer);
        },
        function () { console.error('map create failed'); }
      );
    });

    function changeAlphaRange(elm) {
      var val = Number(elm.value);
      var alpha = val / 100.0;
      document.getElementById('alpha-value').value = String(val);
      if (imageLayer) imageLayer.setOptions({opacity: alpha});
    }
    function changeAlphaValue(elm) {
      var val = Number(elm.value || 0);
      if (isNaN(val)) return;
      val = Math.max(0, Math.min(100, val));
      document.getElementById('alpha-range').value = String(val);
      var alpha = val / 100.0;
      if (imageLayer) imageLayer.setOptions({opacity: alpha});
    }
  </script>
</body>
</html>

コードを実行した結果は、以下になります。
imagelayer_sample.png

ステップ解説

Step 1：HTML の先頭部分（ドキュメント宣言＋メタ）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8"/>
  <title>ZENRIN ImageLayer - Single File</title>
  • <!DOCTYPE html>：HTML5 文書である宣言。ブラウザのレンダリングモードを標準にします。
  • lang="ja"：文書の言語が日本語であることを示します（アクセシビリティや検索に有利）。
  • <meta charset="UTF-8">：文字コードを UTF-8 に設定（日本語を正しく表示するために必須）。

Step ２：スタイル（見た目の指定）

  <style>
    body { margin: 0; font-family: "Yu Gothic","Meiryo",sans-serif; padding:12px; }
    h1 { font-size: 18px; margin: 0 0 8px 0; }
    #ZMap { position: relative; width:100%; height:700px; border:1px solid #777; margin-bottom:8px; }
    #control { width:100%; background:#fafafa; padding:8px; border:1px solid #eee; display:flex; gap:8px; align-items:center; }
  </style>
  • #ZMap に高さ（height:700px）を与えています。地図を表示する div には 必ず高さが必要 です。
  • #control はスライダーやテキスト入力を横並びに表示するために display: flex を使っています。
  • ※ ここでは CSS の定義のみ行っています。
    設定値は Step 4 で追加する <div id="map"> に反映されます。

Step ３：ZENRIN ローダーの読み込み（重要）

<script src="https://test-js.zmaps-api.com/zma_loader.js?key=YOUR_API_KEY&auth=referer"></script>
  • この <script> は ZENRIN の SDK（ローダー）を読み込みます。key に API キー、auth に認証方式（ここは referer）を指定します。
  • 注意：実際の公開コードでは YOUR_API_KEY のようにプレースホルダにして、サーバー側で隠すか必要な参照元に限定してください（APIキーの流出防止）。
  • auth=referer を使う場合は、ZENRIN コンソールで許可するリファラ（例 http://localhost:8000 や本番のドメイン）を設定しておく必要があります。

Step ４：ボディ（地図領域 + コントロール）

<body>
  <div id="ZMap"></div>
  <div id="control">
    <label>重畳レイヤーの不透明度</label>
    <input type="range" id="alpha-range" min="0" max="100" value="50" onchange="changeAlphaRange(this)">
    <input type="text" id="alpha-value" value="50" onchange="changeAlphaValue(this)" style="width:40px;">
  </div>
  • div#ZMap：地図を描画する領域。先に説明した CSS の高さがここに効きます。
  • スライダー（<input type="range">）は 0〜100 の値で不透明度を指定（数値は透明度の%）。onchange 属性でスライダーが変わったら changeAlphaRange(this) が呼ばれます。
  • テキスト入力は直接数値を入れても不透明度を変更できるように用意されています。どちらも互いを更新する仕組みです。

Step ５：JavaScript：変数と中心座標の宣言

var map = null;
var imageLayer = null;
const lat = 35.681406, lng = 139.767132;
  • map：地図オブジェクト（後で new ZDC.Map() が入る場所）。
  • imageLayer：後で ImageLayer インスタンスを保持します（存在確認してから操作するため）。
  • lat,lng：地図の初期中心を緯度・経度で指定（ここでは東京駅付近の座標）。

Step ６：ZMALoader.setOnLoad（ローダーの準備完了を待つ）

ZMALoader.setOnLoad(function (mapOptions, error) {
  if (error) { console.error('ZMALoader error', error); return; }
  mapOptions.center = new ZDC.LatLng(lat, lng);
  mapOptions.zoom = 12;
  ...
});
  • ZMALoader.setOnLoad(callback)：ローダーが読み込まれ、SDKの準備ができたらこの callback が呼ばれます。
  • mapOptions：デフォルトの地図オプションが渡されるので、ここで center や zoom を上書きします。
  • if (error) でエラーを受け取ったら処理を中断します（APIキーのエラーや読み込み失敗をここで検出します）。

Step ７：新しい地図の作成（ZDC.Map）

map = new ZDC.Map(
  document.getElementById('ZMap'),
  mapOptions,
  function () {
    // 成功時の処理
  },
  function () { console.error('map create failed'); }
);
  • ZDC.Map のコンストラクタは主に次の引数：
    　１．地図を描画する DOM 要素（ここでは document.getElementById('ZMap')）
    　２．mapOptions（先ほどの中心・ズームを含むオプション）
    　３．初期化成功時のコールバック（地図が描けたらここが呼ばれる）
    　４．初期化失敗時のコールバック

Step ８：ImageLayer を作って地図に重ねる（成功コールバック内）

imageLayer = new ZDC.ImageLayer(
 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
 {opacity: 0.5, propagation: true}
);
map.addWidget(imageLayer);
  • ZDC.ImageLayer(urlTemplate, options)：XYZ タイルや WMS 等を重ねられるレイヤーを生成します。
  • URL の {z}, {x}, {y} はタイル座標のプレースホルダです（地図のズームや表示領域に合わせて自動的にリクエストされます）。
  • options.opacity は 0〜1 の間の値で不透明度を指定（ここでは 0.5 ＝ 50%）。
  • propagation: true は内部レンダリングの挙動（ズーム時やタイル更新時の動き）に関するオプションで、パフォーマンスや表示性に関係します（詳しくはリファレンスを参照）。
  • map.addWidget(imageLayer) で地図に追加すると、背景のベース地図に重なって表示されます。

Step ９：不透明度を操作する関数（スライダー側）

function changeAlphaRange(elm) {
  var val = Number(elm.value);
  var alpha = val / 100.0;
  document.getElementById('alpha-value').value = String(val);
  if (imageLayer) imageLayer.setOptions({opacity: alpha});
}
  • スライダーの値（0〜100）を Number() で数値化。
  • alpha = val / 100.0 で 0〜1 に変換。ImageLayer には 0〜1 を渡す必要があります。
  • テキスト入力（alpha-value）にスライダーの数値を反映。
  • imageLayer.setOptions({opacity: alpha}) で実際にレイヤーの不透明度を変更します。imageLayer がまだ作られていなければ実行しません（if (imageLayer)）。

Step １０：不透明度を操作する関数（テキスト側）

function changeAlphaValue(elm) {
  var val = Number(elm.value || 0);
  if (isNaN(val)) return;
  val = Math.max(0, Math.min(100, val));
  document.getElementById('alpha-range').value = String(val);
  var alpha = val / 100.0;
  if (imageLayer) imageLayer.setOptions({opacity: alpha});
}
  • テキスト入力から数値を読み取り、isNaN チェックで無効な入力を弾く。
  • Math.max(0, Math.min(100, val)) で 0〜100 の範囲にクランプ（はみ出した値を丸める）。
  • スライダーの位置をテキスト入力の値に合わせ、同様に setOptions で opacity を更新。

おわりに

ここまでで、ZENRIN Maps API に WMS レイヤーを重ね合わせ、透明度をコントロールする方法を学びました。
地図に情報を重畳する仕組みは、分析や可視化において欠かせない要素です。

今回のサンプルはシンプルな例ですが、洪水や土砂災害のハザードマップを重ねて防災に活かしたり、降雨量や気温分布などの気象データを可視化したりなど、公開されているオープンデータで応用できます。
ぜひ実際のデータに置き換えて試し、身近な業務やサービス開発の場面で活用してみてください。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?