Maplibre

Features and improvements

- Add `*-sort-key` layout property for circle, fill, and line layers, to dictate which features appear above others within a single layer([8467](https://github.com/mapbox/mapbox-gl-js/pull/8467))
- Add ability to instantiate maps with specific access tokens ([8364](https://github.com/mapbox/mapbox-gl-js/pull/8364))
- Accommodate `prefers-reduced-motion` settings in browser ([8494](https://github.com/mapbox/mapbox-gl-js/pull/8494))
- Add Map `visualizePitch` option that tilts the compass as the map pitches ([8208](https://github.com/mapbox/mapbox-gl-js/issues/8208), fixed by [#8296](https://github.com/mapbox/mapbox-gl-js/pull/8296)) (h/t [pakastin](https://github.com/pakastin))
- Make source options take precedence over TileJSON ([8232](https://github.com/mapbox/mapbox-gl-js/pull/8232)) (h/t [jingsam](https://github.com/jingsam))
- Make requirements for text offset properties more precise ([8418](https://github.com/mapbox/mapbox-gl-js/pull/8418))
- Expose `convertFilter` API in the style specification ([8493](https://github.com/mapbox/mapbox-gl-js/pull/8493)

Bug fixes

- Fix changes to `text-variable-anchor`, such that previous anchor positions would take precedence only if they are present in the updated array (considered a bug fix, but is technically a breaking change from previous behavior) ([8473](https://github.com/mapbox/mapbox-gl-js/pull/8473))
- Fix rendering of opaque pass layers over heatmap and fill-extrusion layers ([8440](https://github.com/mapbox/mapbox-gl-js/pull/8440))
- Fix rendering of extraneous vertical line in vector tiles ([8477](https://github.com/mapbox/mapbox-gl-js/issues/8477), fixed by [#8479](https://github.com/mapbox/mapbox-gl-js/pull/8479))
- Turn off 'move' event listeners when removing a marker ([8465](https://github.com/mapbox/mapbox-gl-js/pull/8465))
- Fix class toggling on navigation control for IE ([8495](https://github.com/mapbox/mapbox-gl-js/pull/8495)) (h/t [cs09g](https://github.com/cs09g))
- Fix background rotation hovering on geolocate control ([8367](https://github.com/mapbox/mapbox-gl-js/pull/8367)) (h/t [GuillaumeGomez](https://github.com/GuillaumeGomez))
- Fix error in click events on markers where `startPos` is not defined ([8462](https://github.com/mapbox/mapbox-gl-js/pull/8462)) (h/t [msbarry](https://github.com/msbarry))
- Fix malformed urls when using custom `baseAPIURL` of a certain form ([8466](https://github.com/mapbox/mapbox-gl-js/pull/8466))

🐞 Bug fixes

- Fix unbounded memory growth caused by failure to cancel requests to the cache ([8472](https://github.com/mapbox/mapbox-gl-js/pull/8472))
- Fix unbounded memory growth caused by failure to cancel requests in IE ([8481](https://github.com/mapbox/mapbox-gl-js/issues/8481))
- Fix performance of getting tiles from the cache ([8489](https://github.com/mapbox/mapbox-gl-js/pull/8449))

✨ Minor features and improvements

- Improve line rendering performance by using a more compact line attributes layout ([8306](https://github.com/mapbox/mapbox-gl-js/pull/8306))
- Improve data-driven symbol layers rendering performance ([8295](https://github.com/mapbox/mapbox-gl-js/pull/8295))
- Add the ability to disable validation during `queryRenderedFeatures` and `querySourceFeatures` calls, as a performance optimization ([8211](https://github.com/mapbox/mapbox-gl-js/pull/8211)) (h/t [gorshkov-leonid](https://github.com/gorshkov-leonid))
- Improve `setFilter` performance by caching keys in `groupByLayout` routine ([8122](https://github.com/mapbox/mapbox-gl-js/pull/8122)) (h/t [vallendm](https://github.com/vallendm))
- Improve rendering of symbol layers with `symbol-z-order: viewport-y`, when icons are allowed to overlap but not text ([8180](https://github.com/mapbox/mapbox-gl-js/pull/8180))
- Prefer breaking lines at a zero width space to allow better break point suggestions for Japanese labels ([8255](https://github.com/mapbox/mapbox-gl-js/pull/8255))
- Add a `WebGLRenderingContext` argument to `onRemove` function of `CustomLayerInterface`, to allow direct cleanup of related context ([8156](https://github.com/mapbox/mapbox-gl-js/pull/8156)) (h/t [ogiermaitre](https://github.com/ogiermaitre))
- Allow zoom speed customization by adding `setZoomRate` and `setWheelZoomRate` methods to `ScrollZoomHandler` ([7863](https://github.com/mapbox/mapbox-gl-js/pull/7863)) (h/t [sf31](https://github.com/sf31))
- Add `trackPointer` method to `Popup` API that continuously repositions the popup to the mouse cursor when the cursor is within the map ([7786](https://github.com/mapbox/mapbox-gl-js/pull/7786))
- Add `getElement` method to `Popup` to retrieve the popup's HTML element ([8123](https://github.com/mapbox/mapbox-gl-js/pull/8123)) (h/t [bravecow](https://github.com/bravecow))
- Add `fill-pattern` example to the documentation ([8022](https://github.com/mapbox/mapbox-gl-js/pull/8022)) (h/t [flawyte](https://github.com/flawyte))
- Update script detection for Unicode 12.1 ([8158](https://github.com/mapbox/mapbox-gl-js/pull/8158))
- Add `nofollow` to Mapbox logo & "Improve this map" links ([8106](https://github.com/mapbox/mapbox-gl-js/pull/8106)) (h/t [viniciuskneves](https://github.com/viniciuskneves))
- Include source name in invalid GeoJSON error ([8113](https://github.com/mapbox/mapbox-gl-js/pull/8113)) (h/t [Zirak](https://github.com/Zirak))

🐞 Bug fixes

- Fix `updateImage` not working as expected in Chrome ([8199](https://github.com/mapbox/mapbox-gl-js/pull/8199))
- Fix issues with double-tap zoom on touch devices ([8086](https://github.com/mapbox/mapbox-gl-js/pull/8086))
- Fix duplication of `movestart` events when zooming ([8259](https://github.com/mapbox/mapbox-gl-js/pull/8259)) (h/t [bambielli-flex](https://github.com/bambielli-flex))
- Fix validation of `"format"` expression failing when options are provided ([8339](https://github.com/mapbox/mapbox-gl-js/pull/8339))
- Fix `setPaintProperty` not working on `line-pattern` property ([8289](https://github.com/mapbox/mapbox-gl-js/pull/8289))
- Fix the GL context being left in unpredictable states when using custom layers ([8132](https://github.com/mapbox/mapbox-gl-js/pull/8132))
- Fix unnecessary updates to attribution control string ([8082](https://github.com/mapbox/mapbox-gl-js/pull/8082)) (h/t [poletani](https://github.com/poletani))
- Fix bugs in `findStopLessThanOrEqualTo` algorithm ([8134](https://github.com/mapbox/mapbox-gl-js/pull/8134)) (h/t [Mike96Angelo](https://github.com/Mike96Angelo))
- Fix map not displaying properly when inside an element with `text-align: center` ([8227](https://github.com/mapbox/mapbox-gl-js/pull/8227)) (h/t [mc100s](https://github.com/mc100s))
- Clarify in documentation that `PopupmaxWidth` accepts all `max-width` CSS values ([8312](https://github.com/mapbox/mapbox-gl-js/pull/8312)) (h/t [viniciuskneves](https://github.com/viniciuskneves))
- Fix location dot shadow not displaying ([8119](https://github.com/mapbox/mapbox-gl-js/pull/8119)) (h/t [bravecow](https://github.com/bravecow))
- Fix docs dev dependencies being mistakenly installed as package dependencies ([8121](https://github.com/mapbox/mapbox-gl-js/pull/8121)) (h/t [bravecow](https://github.com/bravecow))
- Various typo fixes ([8230](https://github.com/mapbox/mapbox-gl-js/pull/8230), h/t [erictheise](https://github.com/erictheise)) ([#8236](https://github.com/mapbox/mapbox-gl-js/pull/8236), h/t [fredj](https://github.com/fredj))
- Fix geolocate button CSS ([8367](https://github.com/mapbox/mapbox-gl-js/pull/8367), h/t [GuillaumeGomez](https://github.com/GuillaumeGomez))
- Fix caching for Mapbox tiles ([8389](https://github.com/mapbox/mapbox-gl-js/pull/8389))

⚠️ Breaking changes

This release replaces the existing “map views” pricing model in favor of a “map load” model. Learn more in [a recent blog post about these changes](https://blog.mapbox.com/new-pricing-46b7c26166e7).

**By upgrading to this release, you are opting in to the new map loads pricing.**

**Why is this change being made?**

This change allows us to implement a more standardized and predictable method of billing GL JS map usage. You’ll be charged whenever your website or web application loads, not by when users pan and zoom around the map, incentivizing developers to create highly interactive map experiences. The new pricing structure also creates a significantly larger free tier to help developers get started building their applications with Mapbox tools while pay-as-you-go pricing and automatic volume discounts help your application scale with Mapbox. Session billing also aligns invoices with metrics web developers already track and makes it easier to compare usage with other mapping providers.

**What is changing?**

- Add SKU token to Mapbox API requests [8276](https://github.com/mapbox/mapbox-gl-js/pull/8276)

When (and only when) loading tiles from a Mapbox API with a Mapbox access token set (`mapboxgl.accessToken`), a query parameter named `sku` will be added to all requests for vector, raster and raster-dem tiles. Every map instance uses a unique `sku` value, which is refreshed every 12 hours. The token itself is comprised of a token version (always “1”), a sku ID (always “01”) and a random 10-digit base-62 number. The purpose of the token is to allow for metering of map sessions on the server-side. A session lasts from a new map instantiation until the map is destroyed or 12 hours passes, whichever comes first.

For further information on the pricing changes, you can read our [blog post](https://blog.mapbox.com/new-pricing-46b7c26166e7) and check out our new [pricing page](https://www.mapbox.com/pricing), which has a price calculator. As always, you can also contact our team at [https://support.mapbox.com](https://support.mapbox.com).

Bug fixes

- Fix unbounded memory growth caused by failure to cancel requests in IE ([8481](https://github.com/mapbox/mapbox-gl-js/issues/8481))

Breaking changes

- Turned `localIdeographFontFamily` map option on by default. This may change how CJK labels are rendered, but dramatically improves performance of CJK maps (because the browser no longer needs to download heavy amounts of font data from the server). Add `localIdeographFontFamily: false` to turn this off. [8008](https://github.com/mapbox/mapbox-gl-js/pull/8008)
- Added `Popup` `maxWidth` option, set to `"240px"` by default. [7906](https://github.com/mapbox/mapbox-gl-js/pull/7906)

Major features

- Added support for updating and animating style images. [7999](https://github.com/mapbox/mapbox-gl-js/pull/7999)
- Added support for generating style images dynamically (e.g. for drawing icons based on feature properties). [7987](https://github.com/mapbox/mapbox-gl-js/pull/7987)
- Added antialiasing support for custom layers. [7821](https://github.com/mapbox/mapbox-gl-js/pull/7821)
- Added a new `mapbox-gl-csp.js` bundle for strict CSP environments where `worker-src: blob` is disallowed. [8044](https://github.com/mapbox/mapbox-gl-js/pull/8044)

Minor features and improvements

- Improved performance of fill extrusions. [7821](https://github.com/mapbox/mapbox-gl-js/pull/7821)
- Improved performance of symbol layers. [7967](https://github.com/mapbox/mapbox-gl-js/pull/7967)
- Slightly improved rendering performance in general. [7969](https://github.com/mapbox/mapbox-gl-js/pull/7969)
- Slightly improved performance of HTML markers. [8018](https://github.com/mapbox/mapbox-gl-js/pull/8018)
- Improved diffing of styles with `"visibility": "visible"`. [8005](https://github.com/mapbox/mapbox-gl-js/pull/8005)
- Improved zoom buttons to grey out when reaching min/max zoom. [8023](https://github.com/mapbox/mapbox-gl-js/pull/8023)
- Added a title to fullscreen control button. [8012](https://github.com/mapbox/mapbox-gl-js/pull/8012)
- Added `rel="noopener"` attributes to links that lead to external websites (such as Mapbox logo and OpenStreetMap edit link) for improved security. [7914](https://github.com/mapbox/mapbox-gl-js/pull/7914)
- Added tile size info when `map.showTileBoundaries` is turned on. [7963](https://github.com/mapbox/mapbox-gl-js/pull/7963)
- Significantly improved load times of the benchmark suite. [8066](https://github.com/mapbox/mapbox-gl-js/pull/8066)
- Improved behavior of `canvasSource.pause` to be more reliable and able to render a single frame. [8130](https://github.com/mapbox/mapbox-gl-js/pull/8130)

Bug fixes

- Fixed a bug in Mac Safari 12+ where controls would disappear until you interact with the map. [8193](https://github.com/mapbox/mapbox-gl-js/pull/8193)
- Fixed a memory leak when calling `source.setData(url)` many times. [8035](https://github.com/mapbox/mapbox-gl-js/pull/8035)
- Fixed a bug where marker lost focus when dragging. [7799](https://github.com/mapbox/mapbox-gl-js/pull/7799)
- Fixed a bug where `map.getCenter()` returned a reference to an internal `LngLat` object instead of cloning it, leading to potential mutability bugs. [7922](https://github.com/mapbox/mapbox-gl-js/pull/7922)
- Fixed a bug where default HTML marker positioning was slightly off. [8074](https://github.com/mapbox/mapbox-gl-js/pull/8074)
- Fixed a bug where adding a fill extrusion layer for non-polygon layers would lead to visual artifacts. [7685](https://github.com/mapbox/mapbox-gl-js/pull/7685)
- Fixed intermittent Flow failures on CI. [8061](https://github.com/mapbox/mapbox-gl-js/pull/8061)
- Fixed a bug where calling `MapremoveFeatureState` does not remove the state from some tile zooms [8087](https://github.com/mapbox/mapbox-gl-js/pull/8087)
- Fixed a bug where `removeFeatureState` didn't work on features with `id` equal to `0`. [8150](https://github.com/mapbox/mapbox-gl-js/pull/8150) (h/t [jutaz](https://github.com/jutaz))