スワイプ比較は、2つのフルスクリーン地図を1つの画面上に重ね合わせ、スライダーで左右に分割表示して視覚的に比較できる機能です。
技術的には、2つの地図（map01とmap02）を重ねて表示し、CSSのclipPathでスライダー位置を基準に左右を切り分けています。スライダーを動かすと、左右の表示割合がリアルタイムに変化します。
スワイプ比較の特徴
- 直感的な操作 — スライダーをドラッグするだけで2つのレイヤーを比較
- 独立した操作 — 左右の地図はそれぞれ独立してズーム・パンが可能
- 自由なレイヤー選択 — 右側のレイヤーをMap2レイヤーボタンで自由に変更
- URL共有 — スワイプ状態を含むURLを共有可能
ツールボックスを開く
画面右側の工具アイコン（ツールボックス）をクリックします。
スワイプ比較を選択
ツールボックスのメニューから「スワイプ比較」をクリックします。
スライダーが表示される
画面中央に青いノブ（スワップアイコン付き）のスライダーが表示され、画面が左右に分割されます。初期位置は50%（中央）です。
スライダーをドラッグして比較
スライダーを左右にドラッグして、2つのレイヤーの表示割合を調整しながら比較します。
画面サイズの制限
スワイプ比較は画面幅が500px未満の小さな画面では利用できません。タブレットやPCなど十分な画面サイズのデバイスでご利用ください。
スワイプ比較では、左側（map01）と右側（map02）にそれぞれ異なるレイヤーを表示して比較します。
左側（map01）
左側には現在表示中のレイヤーがそのまま表示されます。スワイプ比較モード中は、左側のレイヤー構成は読み取り専用となり変更できません。事前に比較したいレイヤーを表示しておいてください。
右側（map02）
右側のレイヤーは初期状態でOSM Vectorが表示されます。Map2レイヤーボタンをクリックすることで、右側に表示するレイヤーを自由に変更できます。
独立したズーム・パン
左右の地図は同期しません。それぞれ独立してズームやパン操作ができるため、同じエリアを異なる縮尺で比較したり、異なるエリアを並べて確認することも可能です。
スライダーは画面を左右に分割するドラッグ可能なハンドルです。
スライダーの構成
- 青いノブ — スライダー中央のドラッグハンドル。スワップアイコンが表示されています
- 分割ライン — ノブから上下に伸びる縦線で、左右の地図の境界を示します
- Xボタン — スライダー上部の閉じるボタン。クリックでスワイプ比較を終了します
操作方法
- ドラッグ — ノブを左右にドラッグして分割位置を変更
- 初期位置 — スライダーは画面中央（50%）からスタート
- 端まで移動 — スライダーを左端まで移動すると右側のみ、右端まで移動すると左側のみが表示されます
CSS clipPathによる分割
スライダーの位置に応じてCSSのclipPathプロパティが動的に更新され、2つの重なった地図の表示領域がリアルタイムに切り替わります。これにより、シームレスで滑らかな比較体験が実現されています。
スワイプ比較を終了するには、以下の3つの方法があります。
URL保存について
スワイプ比較の状態は共有URLに自動的に保存されます。URLを共有すれば、相手もスワイプ比較モードで地図を開くことができます。レイヤーの選択やスライダーの位置も含めて再現されます。
新旧航空写真の比較（ビフォーアフター）
異なる年代の航空写真を左右に表示し、開発前後の変化や災害前後の状況をスライダーで直感的に比較できます。都市開発の進捗確認や土地利用変化の把握に役立ちます。
異なる年代の地図レイヤー比較
左側に現在の地図、右側に過去の地図を表示して、道路の新設・拡幅、建物の増減、河川の変化などを確認できます。経年変化の調査レポート作成時に便利です。
地図レイヤーの比較検証
OSM VectorとGSI（国土地理院）地図を並べて、道路の描画精度や地物の違いを確認できます。地図データの品質チェックやOpenStreetMapの編集参考に活用できます。
ハザードマップと地形の重ね合わせ
左側にハザードマップ、右側に航空写真や地形図を表示し、災害リスクエリアと実際の地形・建物の関係を視覚的に確認できます。防災計画の検討に役立ちます。
測量データと実際の地図の照合
測量成果や描画データを左側に表示し、右側に航空写真や地理院タイルを表示して、位置精度の確認や現地との整合性チェックを行えます。
スワイプ比較を試してみましょう
右側ツールボックス → スワイプ比較
OH3を開く