Mapbox GL JS v2.6

お客様は、インタラクティブなWeb地図の投影法を選択できるようになりました。Adaptive Projectionsは、Mapbox GL JS v2.6で利用できる多くの新機能の1つであり、設計者はすべてのズームレベルでより正確な視覚化を作成できます。投影法を使用すると、地図作成者はデータを使用してより良いストーリーを伝え、スタイルの要件を満たすことができます。ニューヨーク・タイムズは、全国選挙地図にアルベルス正積円錐図法を使用し、ナショナルジオグラフィック協会は、世界地図にWinkel Tripel図法を使用しています。

これまで、ウェブ地図上で地図投影を変更するには、インタラクティブ性を犠牲にするか、複雑なカスタム実装を開発する必要がありました。Adaptive Projectionsを使用すると、これらの組織や誰もが、複雑な回避策なしに、単一行のコードで投影を使用できます。

地図投影法とは、地球の表面を画面上に平坦化する方法です。平坦化する際には、歪みは避けられません。一部は伸び、一部は押しつぶされます。ほぼすべてのWebマップはメルカトル図法を使用しており、角度と形状が維持され、高ズームレベルに適しています。ただし、メルカトル図法は、国またはグローバルな概要マップのデータを見るときなど、低ズームレベルでの地域のサイズを歪めます。たとえば、グリーンランドはメルカトル図法ではアフリカと同じ視覚的なサイズですが、実際には14分の1のサイズです。

正積図法（Equal Earthなど）または折衷図法（Winkel Tripelなど）のような正積図法は、この歪みを修正し、大陸と国を互いに対する実際のサイズで表示します。顧客は、サイズを維持するか、形状を維持するか、またはその両方を少し維持する図法を選択できるようになりました。GL JSは、Albers、Lambert Conformal Conic、Equal Earth、Natural Earth、Winkel Tripel、Equirectangular、およびMercator図法をサポートしています。

開発者がどの投影法を選択しても、Adaptive Projectionsはユーザーがズームインするにつれて、シームレスにメルカトル図法に移行します。これにより、開発者はデータを正確に伝達する概要マップを簡単に作成できるだけでなく、詳細なレベルでデータを掘り下げることができます。

適応型投影は、既存のすべての地図スタイルと、Mapbox Tiling Serviceで処理された既存のすべてのタイルセットで使用できます。GL JS v2.6を使用すると、開発者はデータ変換やその場しのぎの回避策を省略して、すべての地図視覚化に単一のライブラリを使用できます。1行のコードで、またはMapbox Studioの地図スタイルエディタを使用して、地図の投影を変更できます。

new mapboxgl.Map({
    projection: { name: "winkelTripel" },
    ...
});

GL JS v2.6の新機能は、アダプティブプロジェクションを超えて、モバイルでのジェスチャー処理、3Dラベリングの改善などのより良いオプションが含まれています。

連携ジェスチャー処理

全幅マップを含むページをスクロールしようとした際に、エンドユーザーは、Webページではなくマップに対してスクロールやズーム操作が実行されることに不満を感じる場合があります。Cooperative gesture handlingは、Webページとマップ間のユーザーインタラクションを簡素化します。開発者は、複数のデバイスタイプで一貫したエクスペリエンスを実現するために、カスタムイベント処理を実装する必要がなくなります。

cooperativeGesturesが有効になっている場合、スクロールして地図をズームするには、ControlキーまたはCommandキーを押しながらスクロールする必要があり、タッチデバイスで地図をパンするには、2本の指で地図をパンする必要があります。cooperativeGesturesが無効になっている場合、ユーザーはカーソルまたは指を地図から離すまで、地図の下のコンテンツをスクロールできません。  

協力的なジェスチャーの使用を開始するには、マップをインスタンス化するときにcooperativeGesturesをtrueに設定します。デフォルトでは、cooperativeGesturesはfalseに設定されています。

new mapboxgl.Map({
    cooperativeGestures: true,
    ...
});

3Dラベリングの改善

地図デザイナーは、2Dおよび3Dビューに適したラベルの処理と密度を設計するための2つの新しい方法を利用できます。pitchとdistance-from-cameraの式を使用すると、デザイナーは、地図のカメラが変化するにつれて継続的に評価される動的フィルターを備えたシンボルレイヤーを作成できます。

2つの異なるレイヤーに補完的なピッチ制限を設定することにより、引出線を使用するようにラベルを切り替えます。

// Set the non-elevated layer to show at pitch <= 60 deg
map.setFilter("natural-point-label", ["<=", ["pitch"], 60]);

// Set the elevated layer to show at pitch > 60 deg
map.setFilter("natural-point-label-elevated", [">", ["pitch"], 60]);

pitchとdistance-from-centerの式を組み合わせると、遠くのオブジェクトが互いに近くに見える現象である、遠近法の短縮効果が軽減されます。この例のように、距離のしきい値を使用すると、大きなラベルが密集するのを防ぐことができます。

[
  "case",
  // At a low pitch, always show labels
  ["<", ["pitch"], 60], 
  true,

  // At a high pitch, only show labels close to the center
  ["all",
    [">=", ["pitch"], 60],
    ["<=", ["distance-from-center"], 2.0]
  ], 
  true,

  // At a high pitch, hide labels far from the center
  false
]

Mapbox Studioでスタイルを設定する場合、またはランタイムAPIでフィルターを設定する場合は、これらの新しい式を使用します。

ラベルの安定性と可読性の向上

効果的で邪魔にならないデータ視覚化には、安定したテキスト配置と良好な判読性が不可欠です。テキストがほぼ垂直の場合（長い直線道路に沿っている場合など）、ラベルの向きがより安定するようになりました。この改善と他の多くのラベルに関する改善を、お客様はコードを変更することなく、今日から利用できます。

CJKの改善

これまで、行ラベルのラテン文字と数字の文字はCJK文字の向きと一致していなかったため、ユーザーは文字ごとに読み方向を切り替える必要がありました。これまでポイントラベルでのみ有効だった水平および垂直のテキスト記述モードが、行ラベルでも利用できるようになりました。この機能により、世界中のユーザーのニーズをより適切に満たすことができます。

この変更を利用するには、line labelsにtext-writing-modeプロパティを追加し、有効にする水平モードと垂直モードを指定してください。 

{
  "id": "road-label",
  "type": "symbol",
  "source": "mapbox",
  "layout": {
    "text-field": "{name}",
    "symbol-placement": "line",
    "text-writing-mode": ["horizontal", "vertical"],
    "text-rotation-alignment": "map"
  }
}

ドキュメントと学習

APIリファレンスドキュメントを刷新し、100以上のサンプルを最新のJavascript ES6に移行し、開発者から報告された数百件のドキュメントの問題を解決しました。メソッドとイベントを名前付きセクションにグループ化するようにリファレンスを再構築し、新しい開発者がGL JSの機能を一目で簡単に把握できるようにしました。ドキュメントに対するこれらの改善により、誰もがMapbox GL JSライブラリの強力な機能を理解し、活用しやすくなりました。

v2.6で開発を始める

With this release and those over the past summer, we continue to break new ground for interactive maps and make it easy to integrate with web applications. We've built top community requested features: adaptive projections, gesture handling (1, 2), and quickly resolved browser compatibility issues(1). To update to GL JS v2.6, include the following code in the <head> block of your HTML file:

<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'/>

変更点の完全なリストについては、リリースノートをご覧ください。