ウェブ地図向けの描画ライブラリ「SVGMap」、複数サイトからの地図情報をブラウザー上でハイパーレイヤリング

片岡義明

2026年6月15日 10:29

　「Interop Tokyo 2026」のW3C（World Wide Web Consortium）ブースでは、W3Cにおいて標準化が進められている技術として、ウェブ地図向けの描画ライブラリ「SVGMap」を紹介していた。SVGMapは、提供者が異なるさまざまなウェブ地図サービスを同じ地図上に重ねて描画できる「ハイパーレイヤリング」という技術を実現するオープンソースのフレームワークであり、ソースコードやデモサイトがGitHub上で公開されている。

SVGMapのブース

　一般的なウェブ地図の場合、例えば防災関連のサイトであれば気象庁や国土交通省などが個別に災害関連の地図サイトを設けており、ユーザーは各サイトにそれぞれアクセスして閲覧する必要がある。しかし、SVGMapを利用することにより、インターネット上に分散する地図サイトの中から必要な地図サイトを選んで重ねて表示することが可能となり、情報を一元的に可視化することができる。

　ウェブ地図の利点の1つに、多種多様な情報を重ねることで直感的に把握することが可能な点が挙げられるが、単一のウェブ地図サイト上でそれを実現しようとすると、サーバーや回線のコストがかかることに加えて、アクセス集中によりサーバーが止まるなどトラブルが起きた場合は全ての情報が見られなくなる恐れもある。さらに特定ベンダーに依存して乗り換えが難しくなる“ベンダーロックイン”などの問題が生じる可能性もある。SVGMapでは、ハイパーレイヤリング技術により地図サービスが分散したままウェブブラウザー上で情報を集約・重ね合わせることで、このような課題を解消できる。

　地図は情報統合に適したメディアだが、多くの地図サービスは個別最適化されてきた。ハイパーレイヤリングはそれらを分散したままつなぐ技術として、W3Cや防災分野で再評価されている。

情報を中央サーバーに集めて提供する従来方式（左）とハイパーレイヤリング（右）の違い

　ハイパーレイヤリング技術とは、ウェブブラウザーから複数の外部地図サイトのレイヤーを動的に呼び出し、重ね合わせて表示する技術である。地図データそのものをクライアントやサーバーに保存することなく、外部のレイヤーを一時的に描画できる。

　この仕組みを実現するための技術が、「Layers as Web Apps（LaWA）」と呼ばれる、地図データを変換するための小さなウェブアプリケーション群だ。LaWAはHTML＋CSS＋JavaScriptで作られており、SVGMapビューアーにプラグインされてブラウザー上で実行される。ブラウザーが発信元のデータを直接取得し、表示用に変換して重ね合わせることで、中央サーバーによるデータ収集・複製・再配信を行わずにレイヤー表示を実現する。また、各サービス固有の操作UIを提供する役割も担う。

地図サービスごとに「LaWA」が整備されている（画像提供：高木悟氏）

　SVGMapのデモサイトの地図を見ると、画面左のリンク集には「国土数値情報」「国交省川の防災情報」「気象」「地震・火山」「国交省ハザードマップ」などさまざまなレイヤーが並んでおり、見たいレイヤーにチェックを入れると地図上にレイヤーが表示され、右上に出典や凡例を記載した詳細情報が表示される。呼び出せるレイヤーはラスターとベクトルの両形式に対応しており、気象庁の天気図など、図法がウェブメルカトル図法ではないラスター形式のレイヤーの場合でも、自動的に図法が変換されて表示される。

　ライブカメラのレイヤーを重ねることも可能だ。地図上のカメラアイコンをクリックすると、オリジナルサイトと同様にライブカメラのリアルタイム映像がポップアップで表示される。アメダスの気象情報や水位計などの情報についても、同じように地図上のアイコンをクリックすることで詳細データを確認できる。それぞれの地図サイトにいちいちアクセスして情報を確認する必要がなく、情報を一元的に見られるのでとても便利だ。

　SVGMapの開発者であるKDDI株式会社の高木悟氏（コア技術統轄本部オペレーション本部 web関連技術革新担当シニアエキスパート）はSVGMapの今後について、「現在は気象庁や国交省などさまざまな地図サイトに対応したLaWAをコミュニティが開発し、200以上のレイヤーが利用可能となっています。将来的には、地図の一次提供者がLaWAを提供できるようになることで、異なるサイトの地図情報がウェブ本来の仕組みで相互運用される世界を目指しています」と語った。

　SVGMapの活用事例としては、KDDIが2025年10月にリリースした自治体向けの災害対応DXツール「防災マップボード」においてSVGMapによるレイヤー機能が利用可能なほか、物流会社のAZ-COM丸和ホールディングス株式会社がグループ内の災害対策室訓練において社内の被災想定や訓練中の対応の検討にSVGMapを活用している。また、一般社団法人日本ケーブルラボがケーブルテレビ事業者向けのGIS「ケーブルGIS」にSVGMapの採用を進めている。

　このほか一般社団法人WebDINO Japanがハイパーレイヤリングのグローバル展開に向けて取り組んでおり、その第一歩としてカナダ関連のレイヤー群を整備している。

KDDI株式会社の高木悟氏（左）と一般社団法人WebDINO Japanの瀧田佐登子氏（右）