Mapbox Newsletter WEEKLY TIPSの解説 -「マップ間のスワイプ」

はじめに

この記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「マップ間のスワイプ」についての解説です。また、Newsletterの購読はこちらからお申し込みいただけます。

このサンプルではmapbox-gl-compareというプラグインを使用しています。このプラグインは2種類の地図を左右、または上下に並べ仕切りを移動させることで地図を見比べることができます。

コードを確認

まずExamplesのコードを見に行きましょう。

日本語サイト

英語サイト

基本的に同じコードですが、英語版はスタイルがMapbox Light/Dark v11にアップグレードされているのでこちらを使用します。Mapbox Light/Dark v10ではデフォルトのプロジェクションがWebメルカトルであるのに対し、Mapbox Light/Dark v11ではGlobe（3D表示された地球）なので、印象がかなり異なります。

HTML

まずHTMLを見ていきましょう。いつもはid="map"としていますが、今回は地図を2枚表示するのでid="before" class="map"とid="after" class="map"の2つを準備しています。また、これらの2枚の地図を制御するということでmapbox-gl-compareが使用するdivをこれらの地図の親要素とします。

<div id="comparison-container">
  <div id="before" class="map"></div>
  <div id="after" class="map"></div>
</div>

CSS

基本的にいつも通りで良いですが、地図を描画するdivエレメントがidではなくclassになっていることに注意が必要です。

body { margin: 0; padding: 0; }
.map { position: absolute; top: 0; bottom: 0; width: 100%; }

コード

地図を2枚準備します。containerがbefore、afterになっています

const beforeMap = new mapboxgl.Map({
    container: 'before',
    style: 'mapbox://styles/mapbox/light-v11',
    center: [0, 0],
    zoom: 0
});

const afterMap = new mapboxgl.Map({
    container: 'after',
    style: 'mapbox://styles/mapbox/dark-v11',
    center: [0, 0],
    zoom: 0
});

mapbox-gl-compareオブジェクトを作成します。引数は地図1枚目、地図2枚目、mapbox-gl-compareのコンテナのid、オプションです。

const container = '#comparison-container';
const compare = new mapboxgl.Compare(beforeMap, afterMap, container, {
    // オプション
});

オプションは以下の2つが指定可能です。orientationは分割方向を指定します。mousemoveはtrueにするとマウスの移動に合わせて仕切りが移動します。

{
  orientation: 'horizontal', //'hirizontal' または 'vertical'(デフォルト)
  mousemove: true, //true または　false（デフォルト）
}

カスタマイズ

仕切り部分はこのCSSで定義されています。そこで、この設定を上書きすることで見た目を変更することができます。試しにvertical表示の際の背景と画像を変更しています。

.mapboxgl-compare .compare-swiper-vertical {
    background-color:#ff0000;
    background-image: url('https://1.bp.blogspot.com/-fhOM-e9SwOQ/XhwqDV3hpAI/AAAAAAABW7A/sxPBbCComYULEunH3GJ3dPSvMu3zGTRqACNcBGAsYHQ/s1600/pan_bour_bu-ru.png');
    background-size: 60px;
}

コードから仕切りの位置の調整もできます。

compare.setSlider(200);

また、スライド終了イベントも取得できます。コールバックの引数に仕切りの画面上の座標currentPositionが格納されています。

compare.on('slideend', (e) => {
  alert(e.currentPosition);
});

結果は以下のとおりです。

まとめ

二種類の地図を簡単に見比べられることがわかりました。左側に過去の統計情報、右側に現在の統計情報を表現する地図を配置すると過去と現在を簡単にできそうです。

おまけ

仕切り位置で左右の地図を切り替える仕組みはCSSのclipを使用しています。該当するコードは以下です。

https://github.com/mapbox/mapbox-gl-compare/blob/v0.4.0/index.js#L99-L107

何もしなければ_mapAも_mapBも全領域が表示されていますが（そして重なっていますが）、_mapAに対しては仕切り位置まで_mapBは仕切り位置からの部分を表示することで左右それぞれ別の地図が表示されます。