概要

ウェブ地図描画ライブラリのMapLibre GL JSでは、v5のPreバージョンでGlobe（ウェブ地図を地球儀の形で投影する手法）が実装されました。
この記事執筆時点ではこのプレ版での試行結果と実用例を示します。なお今後、正式バージョンのリリースにて仕様が変更される可能性はありますのでご留意ください。

作成例

地球儀のようにマップを投影して自由に動かせます。

使用例として、自分の渡航履歴を写真と一緒に巡るストーリーマップを作りました。
ポップアップをクリックまたはタップすることで、地球儀をグルグル巡ります。
平面の地図で表現するよりも動きがよりダイナミックになります。

下記アプリケーションへの外部リンク（リンク）

作成工程

作成工程は、MapLibre GL JSの基本的な使い方がわかっていれば比較的容易です。

準備

まず、MapLibre GL JSのversion5以降をインストールします。
この記事執筆時点では正式版はv4までなので、npmでインストールする際はバージョン指定したほうが良いかもしれません。（バージョン指定不要であればアットマーク以降は不要）

npm i maplibre-gl@5.0.0-pre.1

コード

MapLibreの利用経験が既にある方向けに、コアな部分のみ簡易に載せます。その他は適宜補完してください。

index.js

import * as maplibregl from "maplibre-gl";
import 'maplibre-gl/dist/maplibre-gl.css';
import './style.css';

//マップの基本設定例
const map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',//デモ用なので適宜差し替え
    center: [139.93003, 35.72164],//初期表示位置
    zoom: 3,//初期ズームレベル
});

//マップ描画時の設定部分
map.on('load', () => {
    map.setProjection({"type": "globe"}); //ここで投影法=Globeを指定
});

留意点とTips

必須設定

重要なのは「map.setProjection({"type": "globe"});」の部分だけです。その他は通常のMapLibre GL JSでの記述で基本的にOKです。

他機能との競合

注意点としては、GlobeViewと親和性のない機能を加えると正常な挙動とならない場合があります。
例えば、version4以降で実装されたSky（空の色を描画する機能）を設定すると、地球儀が全体的に暗い透明色で覆われてしまいます。
それ以外にも、Mapの基本設定によってはGlobeViewがうまく機能しないケースもあるかもしれません。

一例として、下図はSky機能と併用した際の描画です。地球全体が月食（？）のような色味になってしまいます。

背景色について

背景色を特に意識せずデフォルト（白）のままだと下図のようになりますが、いまいち雰囲気が出ない印象です。

そこで、もっと「宇宙っぽく」表現するためにスタイルシートで暗めのグラデーション背景色を設定してみました。

style.css

#map {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #4286f4, #373B44); /*宇宙をイメージした暗めのグラデーション背景色*/
}

もちろん、コンテンツの内容や好みによりますが、見比べてみると印象がかなり違うのでおすすめします。この辺りのデフォルト設定は今後のリリースで改良があるかもしれませんが、参考になれば幸いです。

使いどころ

平面の地図ではなく地球儀として描画するメリットは、グローバルレベルの情報の可視化にあると思います。
例えば世界各国の国別統計情報を色分けして示すようなコロプレス図は、平面だと緯度によって大きく歪んでしまう地域があるためミスリードとなりやすいですが、地球儀で示すことでそれが解消されます。
また、最初の作成例で出したようにグローバルなストーリーマップにも有用だと思います。場面に応じて地球儀がグルグル回転するので、視覚的に楽しくインパクトがあるコンテンツを作れそうです。

おわりに

以上、MapLibre GL JSのGlobeViewに関する記事でした。
執筆時点ではプレリリースの段階なので、今後も修正と改良が重ねられると思いますが、この時点での概要とTipsとして参考になれば幸いです。
MapLibre GL JSの公式NewsやGitHubリポジトリでの流れは自分でも追っていきますが、把握しきれていない部分も多々ありますので、もし齟齬があればご指摘ください。