こんな複雑な時代だからこそ、MapboxGLを使って逆さ地図を作ろう!

最終更新日

「地図を逆さにすると各国の思惑が手にとるようにわかる!」 らしいです。
ホントかどうかはわかりません。

「逆さ地図」で読み解く世界情勢の本質 (SB新書)
SBクリエイティブ (2015-05-27)
売り上げランキング: 5,755

実のところ「逆さ地図」にかこつけたMapboxGLの紹介記事です。

MapboxGL

leafletをベースとした地図クライアントライブラリ「mapbox.js」を提供しているmapbox社が次期クライアントとして新たに作成しているライブラリが「MapboxGL」です。
Google Maps APIなどのように地図画像を読み込んで表示するのではなく、ベクトルデータを読み込みクライアントサイドでWebGL(アプリの場合はOpenGL)を使って地図を表示します。

地図を回転させてみる

ベクトルタイルにはさまざまな利点があるのですが、なかでも地図画像を読み込む方式では実現が難しかった地図の回転がクライアントサイドで自由に行えるというものがあります。

そこでMapboxGLを使ってパン/ズームに対応した「逆さ地図」を作ってみます。
とはいっても、コードは非常に簡単で初期設定以外ではmap.rotateToメソッドを使うだけです。

ReverseMap

example
(表示してから2秒後に地図が180度回転します)

いいぇ〜い、とても簡単。
ポイントとしては地図はひっくり返っても、地名などの文字は逆さまになっていないところです。
画像タイル形式だとどうしても文字も一緒にひっくり返ってしまったりしまいますが、ベクトルタイルならそんな心配もなくスムーズにrotateアニメーションを実装できます。

今はまだ実験段階ですが、いずれは画像タイル方式ではなくベクトルタイル方式が主流になっていくと思うので、今のうちに触ってみてはいかがでしょうか。