Edited at

Mapbox GL JS v1.0.0とv0.54.0の新機能

:congratulations: ついに全Mapbox GL JS界隈が待ち望んだv1.0.0が公開されました :tada:

(Mapbox GL JS v0.54.0の新機能をまとめていたらいつの間にかv1.0.0が公開されていました)

Mapbox GL JSは長い間ベータ版だったのでようやくv1.0.0になりとても嬉しい限りです:confetti_ball:


Mapbox GL JS v1.0.0での新機能

特にv0.54.0から新機能等の追加はなく、価格改定への対応を行ったバージョンとなります。

Mapbox GL NativeとMapbox GL JSのメジャーバージョンが上がり、同時リリースされました。


:warning:破壊的変更


map views価格モデルからmap load価格モデルに変更 #8276

これはMapbox GL Nativeと同時リリースになります。

Maps API及びMaps SDKの料金体系が変更になったことでの仕様変更となります。

この価格改定はすぐの適用も可能ですが、価格改定前からの顧客のために2019年11月20日までは従来プランでも利用できるようです。

改定後の詳しい価格についてはMapbox pricingをご参照ください。

主な変更点を簡単にですが記しておきます。詳しくはNew pricingをご参照ください。


開発者向けに個別のAPIの価格を設定

Vector Tiles APIなど個別のAPIに対する価格が設定されました。


商用利用プランがなくなった

以前は商用利用とそれ以外でプランが分けられていましたが、今回の改定から同一の価格設定となります。


請求単位の変更

以前はmap viewあたりの課金だったのでユーザがパンやズームイン/ズームアウトするたびにカウントが増えていきました。

今回の変更で、map loadあたりになったので、地図が読み込まれたときに+1loadでそれ以降はパンやズームイン/ズームアウトの操作ではカウントは増えないようになりました。


Mapbox GL JS v0.54.0からの新機能

ここからはv0.54.0からの新機能についてです。

Mapbox GL JS v0.54.0は2019年4月26日にリリースされました。

localIdeographFontFamilyがデフォルトでonになるなど、パフォーマンスが大きく改善されました。


:warning:破壊的変更


localIdeographFontFamilyがデフォルトでonに #8008

Mapbox Vector Tileを表示する時はStyleでフォントのURLを指定します。そして描画時に必要なフォントをダウンロードして表示します。

英語の場合は大して問題にはならないのですが、CJK(Chinese/Japanese/Korean)の場合は文字数が多く、ダウンロードしないといけないフォントのデータ数が多いです。

特に、初回ロード時は大量のフォントデータをダウンロードしないといけないため、英語に比べてロードが遅く、地図表示までが遅いという問題がありました。

そこでv0.39.0で追加されたのがlocalIdeographFontFamilyです。

localIdeographFontFamilyを有効化することでフォントをダウンロードする代わりにローカルにあるフォントを使用することができます。

mapを宣言するときにlocalIdeographFontFamilyを指定します。

下の例では必要なフォントをNoto SansNoto Sans CJK SCsans-serifがローカルにある場合に代用する設定です。


localIdeographFontFamilyの有効化

const map = new mapboxgl.Map({

container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [120.3049, 31.4751],
zoom: 12,
localIdeographFontFamily: "'Noto Sans', 'Noto Sans CJK SC', sans-serif"
});

v0.54.0未満まではlocalIdeographFontFamilyはオプションで指定して有効化しないといけなかったのですが、v0.54.0でデフォルトで有効化されました(ロードされるフォントはsans-serifになっています)。

localIdeographFontFamilyがデフォルトで有効化されたのは非常に嬉しいです。

新宿周辺の初回ロード時で簡単に調べてみました。



上がv0.53.0(localIdeographFontFamily無効状態)で

下がv0.54.0(localIdeographFontFamily有効状態)です。

フォントのダウンロードがなくなった分ロード時間が相当早くなっているのがわかると思います。

localIdeographFontFamilyを無効化するには(v0.54.0未満と同じように使うためには) localIdeographyFontFamily: falseとすることで無効化できます。


PopupmaxWidthオプションが追加 #7906

PopupmaxWidthオプションが追加されました。デフォルトは240pxとなります。


:four_leaf_clover:機能追加


アニメーションに対するサポートが追加 #7999



  • map.addImage()の引数にStyleImageInterfaceが取れるようになりました


  • StyleImageInterfaceは動的な画像のためのインターフェースでStyleImageInterfaceを使うことでアニメーションを作成できます

  • サンプルはAdd an animated icon to the mapにあります


動的にスタイル画像を生成するサポートを追加 #7987


カスタムレイヤーのアンチエイリアスをサポート #7821


  • MSAA(Multi-Sample Anti-Aliasing)のオプションをサポート


厳密なCSP環境用の新しいmapbox-gl-csp.jsバンドルを追加 #8044


  • CSP(Content-Security-Policy)のworker-src:blobが許可されていない場合での新しいバンドルとのこと


:sparkles:小変更


  • fill extrusionsのパフォーマンスを改善 #7821

  • symbol layersのパフォーマンスを改善 #7967

  • レンダリングのパフォーマンスが改善 #7969


    • DevTools profilerでみると2.5xも早くなってるとのこと



  • HTML markersのパフォーマンスが改善 #8018

  • visibility:noneにしてるのにhttp requestをしている問題を改善 #8005

  • canvasSource.pauseの動作を改善し、信頼性を高め、単一のフレームをレンダリングできるように #8130

  • min/max Zoomになったときにズームボタンがグレーアウトするように #8023


  • fullscreen control buttonにタイトル要素が追加された #8012

  • セキュリティ向上のために、外部のWebサイトにつながるリンクにrel = "noopener"属性を追加(Mapboxロゴ等) #7914


  • tile debugにタイルサイズが表示されるように #7963



    • map.showTileBoundaries = true;とするとタイルのバウンディングボックスが表示されますが、map.showTileBoundariesにタイルサイズが表示されるようになりました。




  • benchmark suiteのロード時間が大幅に改善 #8066



:bug:バグ修正


  • Safari 12以降でロゴとアトリビューションが表示されないのを修正 #8193

  • 急速にズームイン/ズームアウトするとがUncaught TypeErrorになるバグを修正 #7988



  • removeFeatureStateが他のズームレベルのタイルの状態を削除しなかったバグを修正 #8087


  • removeFeatureStateがid = 0で動作しなかったバグを修正 #8150


  • source.setData(url)を何度も呼び出したときのメモリリークを修正 #8035

  • ドラッグ時にマーカーがフォーカスを失っていたバグを修正 #7799


    • IE11等で起きていた模様




  • map.getCenter()がクローンを作成する代わりに内部のLngLatオブジェクトへの参照を返しているのを修正 #7922

  • デフォルトのHTMLマーカーの位置がわずかにずれていたバグを修正 #8074

  • ポリゴンではないレイヤーにfill extrusionを追加すると謎の物体が発生するバグを修正
    #7685

  • CIが失敗するのを修正 #8061