Maplibre

🐞 Bug fixes

- Fix bug in `NavigationControl` compass button that prevented it from rotating with the map ([8605](https://github.com/mapbox/mapbox-gl-js/pull/8605))

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))