【MapLibre】Globe projection の切り替えボタンを作る

　MapLibre GL JS 5.0.0 から Globe projection（地球儀表示）が新たに実装されました。従来の Web メルカトル図法との差異は以下のようなものが挙げられます。

• Web メルカトル：世界地図全体を一目で見渡すことができる。恐らくユーザーがもっとも慣れ親しんだ表現方法。
• 地球儀表示：Web メルカトル図法では特に高緯度の地域に対して歪みが発生する。この歪みを地球儀表示だと回避することができる。

　上記のように投影法うんぬんの話はありますが、地球儀をグルグル回すのと、壁に貼られた世界地図を眺めるのは楽しみ方が違うので、そういった意味でも、2 つの表示を切り替えられるようにするのが良いと思います。

　以下、Web メルカトルと地球儀表示を切り替える方法について簡単に説明しますが、このサイトのトップページにも切り替え機能を実装しているので、デモとしてご覧ください（こちら）。

　まずは、HTML で切り替え用のチェックボックスを作ります。map_content が地図表示用の div タグ、projectionToggle が切り替え用のチェックボックスです。ここでは、地図の上にチェックボックスを配置するとして、map_container には position:relative が、map_content および projection-controls には position:absolute が設定されるものとします。

<div id="map_container" class="map_container">
    <div id="map_content" class="map_content"></div>
    <div id="projection-controls">
        <input type="checkbox" id="projectionToggle" autocomplete="off"/>
        <label for="projectionToggle">地球儀表示</label>
    </div>
</div>

　次に JavaScript で チェックボックスに対してイベントを付加します。

const map = new maplibregl.Map({
    container: 'map_content',
// （中略、MapLibre で Map の定義）
});

// チェックボックスのイベントリスナーを設定
document.getElementById('projectionToggle').addEventListener('change', function() {
    if (this.checked) {
        map.setProjection({'type':'globe'});
    }else{
        map.setProjection({'type':'mercator'});
    }
});

　あとは適宜 CSS を調整して完成です。当サイトは PMTiles を使っていますが、PMTiles でも 無事動作しました。なお、MapLibre の地球儀表示については以下の記事が参考になります。（MapLibre GL JSのGlobe Projectionを試す）

　

ちょっと宣伝

　当サイトは地図を使った海外旅ブログ/YouTube まとめサイトとなっています。トップページに地図がありますが、地名を押すと画像が開き、画像を押すと関連記事一覧（クリック数順）が開きます。記事数が多い国ほど赤く、地名もその国で記事が多い都市の文字が大きくなるようにしています。ぜひ覗いてみてください。
　当サイトで海外旅ブログを執筆することも可能です（もちろん無料です）！　また既にブログをお持ちの方も、当サイトからリンクを貼ることができるようになっています。パントレ開発部までお気軽にお問い合わせください。

パントレ開発部