Mapbox GL JS のポップアップをアニメーション化

この記事は Mapbox Advent Calendar 2020 の13日目の記事です。

Mapbox のポップアップ（吹き出しで情報が表示されるやつ）って、実にシンプル、言い方を変えるとあまりに素っ気ないんです。こんな感じ。

一応独自のクラスを指定したり、2日目の記事のように CSS をいじったりすると見た目を変えることはできるのですが、なんかこう、面白味がないんですよね。ポップアップなんだから、もう少し出てくる時にポップアップ感が欲しい。元気のあるやつ。

そこで Mapbox の Popup クラスを拡張して、アニメーションをつけた AnimatedPopup クラスを作ってみました。実際に動いているのを見てもらうのが分かりやすいので、サンプルをお見せします。どん！真ん中のマーカーをクリックすると、ポップアップが出たり消えたりします。

 

どうですか？生きのいいポップアップになりましたよね？

設置方法は非常に簡単です。まず、HTML ヘッダに次のタグを追加します。これは Mapbox GL 本体の後に読み込むようにしてくださいね。

<script src="https://cdn.jsdelivr.net/npm/mapbox-gl-animated-popup@latest"></script>

そして従来 Popup を new していたところを、

var popup = new mapboxgl.Popup();

AnimatedPopup で置き換える。これだけ。コンストラクタオプションは Popup と同じものを指定できます。

var popup = new AnimatedPopup();

ところで、「デフォルトのアニメーション、勢い良過ぎ！ポップアップアニメーションの動きや速さを変えられないの？」という人もいるかと思います。そのような方のために、アニメーションのパラメータは次のように指定できるようになっています。

var popup = new AnimatedPopup({
    openingAnimation: {
        duration: 1000,
        easing: 'easeOutElastic'
    },
    closingAnimation: {
        duration: 300,
        easing: 'easeInBack'
    }
});

上記はデフォルトの設定ですが、duration でアニメーションの持続時間を、easing でアニメーションのイージング関数を、オープン時とクローズ時のそれぞれで指定することができます。パラメータの選択は、次のページで動きを確認しながら確認することができますので、ぜひお使いください。

Mapbox GL JS Animated Popup

それから GitHub のリンクも載せておきますので、実装に興味がある方はこちらもどうぞ。

最後に、このポップアップのアニメーション化は、元々 東京の公共交通のリアルタイム3Dマップ Mini Tokyo 3D のために作ったというのもあり、ぜひこちらのほうもお楽しみください。