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](https://github.com/mapbox/mapbox-gl-js/pull/8276)
これはMapbox GL Nativeと同時リリースになります。
Maps API及びMaps SDKの料金体系が変更になったことでの仕様変更となります。
この価格改定はすぐの適用も可能ですが、価格改定前からの顧客のために2019年11月20日までは従来プランでも利用できるようです。
改定後の詳しい価格については[Mapbox pricing](https://www.mapbox.com/pricing/)をご参照ください。
主な変更点を簡単にですが記しておきます。詳しくは[New pricing](https://blog.mapbox.com/new-pricing-46b7c26166e7)をご参照ください。

### 開発者向けに個別の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](https://github.com/mapbox/mapbox-gl-js/pull/8008)
Mapbox Vector Tileを表示する時はStyleでフォントのURLを指定します。そして描画時に必要なフォントをダウンロードして表示します。
英語の場合は大して問題にはならないのですが、CJK(Chinese/Japanese/Korean)の場合は文字数が多く、ダウンロードしないといけないフォントのデータ数が多いです。
特に、初回ロード時は大量のフォントデータをダウンロードしないといけないため、英語に比べてロードが遅く、地図表示までが遅いという問題がありました。

そこでv0.39.0で追加されたのが`localIdeographFontFamily`です。
`localIdeographFontFamily`を有効化することでフォントをダウンロードする代わりにローカルにあるフォントを使用することができます。
mapを宣言するときに`localIdeographFontFamily`を指定します。
下の例では必要なフォントを`Noto Sans`、`Noto Sans CJK SC`、`sans-serif`がローカルにある場合に代用する設定です。

```jsx: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-load.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270436/de7e72cc-7267-271d-0c5c-e21da937260d.png)
![v0.54.0-load.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270436/572513cb-2f04-2963-24a4-588c7c65de14.png)

上がv0.53.0(`localIdeographFontFamily`無効状態)で
下がv0.54.0(`localIdeographFontFamily`有効状態)です。
フォントのダウンロードがなくなった分ロード時間が相当早くなっているのがわかると思います。

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


### `Popup`に`maxWidth`オプションが追加　[#7906](https://github.com/mapbox/mapbox-gl-js/pull/7906)
`Popup`に`maxWidth`オプションが追加されました。デフォルトは240pxとなります。

## :four_leaf_clover:機能追加
### アニメーションに対するサポートが追加 [#7999](https://github.com/mapbox/mapbox-gl-js/pull/7999)
- `map.addImage()`の引数に`StyleImageInterface`が取れるようになりました
- `StyleImageInterface`は動的な画像のためのインターフェースで`StyleImageInterface`を使うことでアニメーションを作成できます
- サンプルは[Add an animated icon to the map](https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/)にあります

### 動的にスタイル画像を生成するサポートを追加 [#7987](https://github.com/mapbox/mapbox-gl-js/pull/7987)
- マップに画像が存在しない場合に発生するイベント
- サンプルは[Generate and add a missing icon to the map](https://docs.mapbox.com/mapbox-gl-js/example/add-image-missing-generated/)にあります

### カスタムレイヤーのアンチエイリアスをサポート [#7821](https://github.com/mapbox/mapbox-gl-js/pull/7821)
- MSAA(Multi-Sample Anti-Aliasing)のオプションをサポート

### 厳密なCSP環境用の新しい`mapbox-gl-csp.js`バンドルを追加 [#8044](https://github.com/mapbox/mapbox-gl-js/pull/8044)
 - CSP(Content-Security-Policy)の`worker-src：blob`が許可されていない場合での新しいバンドルとのこと

## :sparkles:小変更
- fill extrusionsのパフォーマンスを改善 [#7821](https://github.com/mapbox/mapbox-gl-js/pull/7821)
- symbol layersのパフォーマンスを改善 [#7967](https://github.com/mapbox/mapbox-gl-js/pull/7967)
- レンダリングのパフォーマンスが改善 [#7969](https://github.com/mapbox/mapbox-gl-js/pull/7969)
 - DevTools profilerでみると2.5xも早くなってるとのこと
- HTML markersのパフォーマンスが改善 [#8018](https://github.com/mapbox/mapbox-gl-js/pull/8018)
- visibility:noneにしてるのにhttp requestをしている問題を改善 [#8005](https://github.com/mapbox/mapbox-gl-js/pull/8005)
- canvasSource.pauseの動作を改善し、信頼性を高め、単一のフレームをレンダリングできるように  [#8130](https://github.com/mapbox/mapbox-gl-js/pull/8130)
- min/max Zoomになったときにズームボタンがグレーアウトするように [#8023](https://github.com/mapbox/mapbox-gl-js/pull/8023)

![zoom-button.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270436/6570012b-7061-4a39-3964-5efddd437e03.png)

- fullscreen control buttonにタイトル要素が追加された [#8012](https://github.com/mapbox/mapbox-gl-js/pull/8012)
- セキュリティ向上のために、外部のWebサイトにつながるリンクにrel = "noopener"属性を追加(Mapboxロゴ等) [#7914](https://github.com/mapbox/mapbox-gl-js/pull/7914)
- tile debugにタイルサイズが表示されるように [#7963](https://github.com/mapbox/mapbox-gl-js/pull/7963)
 - `map.showTileBoundaries = true;`とするとタイルのバウンディングボックスが表示されますが、`map.showTileBoundaries`にタイルサイズが表示されるようになりました。
 ![showTileBoundaries.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270436/8e60298c-1c5e-de1d-6474-80e73f5ea929.png)

- benchmark suiteのロード時間が大幅に改善 [#8066
](https://github.com/mapbox/mapbox-gl-js/pull/8066)


## :bug:バグ修正
- Safari 12以降でロゴとアトリビューションが表示されないのを修正 [#8193](https://github.com/mapbox/mapbox-gl-js/pull/8193)
- 急速にズームイン/ズームアウトするとがUncaught TypeErrorになるバグを修正 [#7988
](https://github.com/mapbox/mapbox-gl-js/pull/7988)
- `removeFeatureState`が他のズームレベルのタイルの状態を削除しなかったバグを修正 [#8087](https://github.com/mapbox/mapbox-gl-js/pull/8087)
- `removeFeatureState`がid = 0で動作しなかったバグを修正 [#8150](https://github.com/mapbox/mapbox-gl-js/pull/8150)
- `source.setData(url)`を何度も呼び出したときのメモリリークを修正 [#8035](https://github.com/mapbox/mapbox-gl-js/pull/8035)
- ドラッグ時にマーカーがフォーカスを失っていたバグを修正 [#7799](https://github.com/mapbox/mapbox-gl-js/pull/7799)
 - IE11等で起きていた模様
- `map.getCenter()`がクローンを作成する代わりに内部のLngLatオブジェクトへの参照を返しているのを修正 [#7922](https://github.com/mapbox/mapbox-gl-js/pull/7922)
- デフォルトのHTMLマーカーの位置がわずかにずれていたバグを修正 [#8074](https://github.com/mapbox/mapbox-gl-js/pull/8074)
- ポリゴンではないレイヤーにfill extrusionを追加すると謎の物体が発生するバグを修正 
 [#7685](https://github.com/mapbox/mapbox-gl-js/pull/7685)
- CIが失敗するのを修正 [#8061](https://github.com/mapbox/mapbox-gl-js/pull/8061)