インタラクティブなWebマップの投影方法を選択できるようになりました。Mapbox GL JS v2.6の新機能の一つであるアダプティブ・プロジェクション（自動適用投影法）により、開発者やデザイナーはあらゆるズームレベルで正確なビジュアライゼーションを行うことができます。ニューヨークタイムズ紙は国政選挙の地図にアルベルス図法を使用し、ナショナルジオグラフィック協会は世界地図にヴィンケル図法を使用しています。
これまで、Webマップで地図投影法を変更するには、インタラクティブ性を犠牲にするか、複雑なカスタム実装を行う必要がありました。アダプティブ・プロジェクションにより、複雑な作業をせずとも、たった 1 行のコードで異なった地図投影法をご利用いただけます。
地図投影は地球の表面を画面上に平らに表現する方法です。平らにするためには、ある部分は伸び、ある部分は縮むというように、歪みは避けられません。ほとんどのWebマップはメルカトル図法を使用しています。メルカトル図法は、角度と形状を維持し、高倍率でも機能しますが、世界全体のデータを見るときのように、ズームアウトしていくと地域のサイズが歪んでしまいます。例えば、グリーンランドは、実際にはアフリカの14分の1の大きさにもかかわらず、メルカトル図法では同じ大きさに見えます。
イコールアース図法のような等面積投影法やヴィンケル図法のような投影法は、この歪みを修正し、大陸や国を相対的に本来の大きさで表示します。
今後、Mapboxをご利用いただいている全ユーザーは、国の大きさを維持するか、形状を維持するか、あるいはその両方を兼ね備えた投影法を選択することができます。GLJS は、アルベルス図法、ランベルト正角円錐図法、イコールアース図法、ナチュラルアース図法、ヴィンケル図法、正距円筒図法、メルカトル図法の各投影法に対応しています。
▲ズームするとメルカトル図法に移行するヴィンケル図法
アダプティブ・プロジェクションはどの投影法を選択しても、ユーザーがズームインするとメルカトル図法にシームレスに移行します。データを正確に伝えるだけではなく、詳細に掘り下げるオーバービューマップを簡単に作成することができます。
▲ズームするとメルカトル図法に移行するアルベルス図法の南極
アダプティブ・プロジェクションは、既存のマップスタイルや、Mapbox Tiling Service で処理された既存のタイルセットでご利用いただけます。GL JS v2.6では、開発者はデータ変換や面倒な作業を必要とせず、すべてのマップビジュアライゼーションに単一のライブラリを使用することができます。1行のコードで地図の投影を変更したり、Mapbox Studioのマップスタイルエディタを使用することができます。
GL JS v2.6の新機能は、アダプティブ・プロジェクションだけでなく、モバイルでのジェスチャー処理のオプション改善、3Dラベリングの改善なども含まれます。
コーポレーティブ・ジェスチャー操作
地図が全幅で表示されているWebページをスクロールしようとすると、スクロールやズームの操作がWebページではなく地図上で行われるため、エンドユーザーがイライラすることがあります。コーポレーティブ・ジェスチャー操作は、Webページと地図の間のユーザーの操作をシンプルにします。開発者は、複数のデバイスタイプで一貫したエクスペリエンスを得るために、カスタム イベント処理を実装する必要がなくなります。
コーポレーティブ・ジェスチャーを有効にすると、スクロール中に control キーまたは command キーを使用してマップをズームする必要があります。タッチデバイスの場合は、2 本の指を使用してマップを移動する必要があります。
コーポレーティブ・ジェスチャーを無効にすると、カーソルや指をマップから離すまで、地図の下のコンテンツにスクロールすることができません。
▲コーポレーティブ・ジェスチャー有効時の操作
コーポレーティブ・ジェスチャーを有効にするには、マップをインスタンス化する際に コーポレーティブ・ジェスチャーを trueに設定します。デフォルトでは、コーポレーティブ・ジェスチャーはfalseに設定されています。
3Dラベリングの改善
2Dおよび3Dビューに適したラベル処理とラベルの密度をデザインするための2つの方法を新たに導入しました。ピッチ表現とカメラからの距離表現では、マップカメラの変化に合わせて連続的に評価されるダイナミックフィルターを用いてシンボルレイヤーを作成することができます。
▲高ピッチ時にラインを使用するラベルへと動的に切り替える
2つのレイヤーのピッチ制限を設定することで、ラインを使用するラベルを切り替えることができます。
ピッチ表現と中心からの距離表現を組み合わせることで、遠くの物体が近くに見える現象である「透視短縮」の影響を緩和することができます。この例のように、距離のしきい値を設定することで、大きなラベルがまとまってしまうことを防ぐことができます。
これらの新しい表現は、Mapbox Studioでスタイリングする際や、ランタイムAPIでフィルタを設定する際に使用します。
ラベルの安定性と読みやすさの向上
見やすい、安定したテキストの配置は、効果的なデータビジュアライゼーションには欠かせません。長くてまっすぐな道のように、テキストがほぼ垂直の場合、ラベルの向きがより安定するようになりました。この他にもラベルには様々な改良が施されており、お客様はコードを変更することなく、すぐに使用することができます。
CJKの改善
従来、ラインラベルのラテン文字や数字は、日中韓の文字の向きと一致しておらず、ユーザーは文字ごとに読む方向を変えなければなりませんでした。以前はポイントラベルでのみ有効だった横書き・縦書きのテキストモードが、ラインラベルでも利用できるようになりました。これにより、世界中のユーザーのニーズに応えることができます。
この変更を適用するには、ラインラベルにtext-writing-modeプロパティを追加し、横書きと縦書きのどちらを有効にするかを指定します。
ドキュメンテーション
APIリファレンスのドキュメントを全面的に見直し、100以上のExamplesを最新のJavascript ES6に移行し、ユーザーの皆様からご報告いただいた問題を解決しました。また、メソッドやイベントをセクションごとに分類し、新規の開発者の方がGL JSの機能を一目で理解できるようにしました。
このようなドキュメントの改善により、Mapbox GL JSライブラリの強力な機能を誰もが簡単に理解し、構築できるようになりました。
早速v2.6でのビルドを始めましょう
昨年の夏からのリリースで、Mapboxはインタラクティブマップの新境地を開拓し、ウェブアプリケーションとの統合を容易にしました。また、コミュニティからの要望が多かった、アダプティブ・プロジェクション、ジェスチャー操作(1,2)、ブラウザの互換性問題の迅速な解決(1)などの機能を搭載しています。GL JS v2.6にアップデートするには、HTMLファイルの<head>ブロックに以下のコードを記述してください。
<script src='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.css' rel='stylesheet'/>
変更点の詳細については、リリースノートをご覧ください。
＊本記事は、Mapbox Inc. Blogの翻訳記事です。
