We've just released Mapbox GL JS v2.1.1, with efficient pitched tile loading, improved rendering precision for CJK labels, 3D interaction enhancements, JS Promises for map events, and several other bug fixes and improvements.
More efficient tile loading in pitched views
We improved performance of pitched views by slightly shifting the position of the horizon line. The new behavior results in very little visual difference, but reduces the number of tiles in view by up to 20%. This results in higher frame rates, shorter load times and less memory consumption for highly pitched maps.
Improved precision when rendering Chinese, Japanese and Korean labels
We’ve made several changes to make CJK (Chinese, Japanese and Korean) labels look better.
First, we introduced a new localFontFamily map option that allows you to turn on local font rendering for all characters, not just ideographic glyphs (that are locally rendered by default). This fixes issues with character alignment when CJK glyphs are mixed together with other characters like numbers, and makes such labels more consistent in appearance.
Additionally, the resolution of locally rendered labels was doubled, making corresponding labels crisper and more legible, especially at smaller font sizes. In the video below, you can see that the Japanese text is much crisper and has fewer artifacts in v2.1.1.
Preserve draw order with 3D terrain
3D terrain added in v2 also had the side effect of introducing rendering inconsistencies for certain maps during user interactions. When rendering 3D terrain, GL JS attempts to render multiple layers in a single batch to achieve the best performance possible. This can result in layers being reordered during rendering. v2.1.1 fixes this problem, providing a consistent rendering experience inclusive of user interaction events.
If layer order must be maintained, you can now set the new map property optimizeForTerrain:false in order to ensure the correct order.
Previous behavior not preserving draw order during user interaction
New behavior during user interaction, in draw order priority
Better map-aligned labels on pitched maps with 3D terrain
The legibility of labels on 3D terrain has been improved when using text-pitch-alignment:”map”. The previous implementation over-adjusted text sharpness to compensate for map pitch, resulting in blurry text that was particularly noticeable on highly pitched views.
Querying of fill-extrusions on 3D maps
map.queryRenderedFeatures() now supports querying of features for all layer types with 3D terrain. This lets you build interactive 3D maps with the same performance you’ve come to expect from 2D maps.
Promises and Async/Await with map events
The map.once method, which allows you to run code once a given event fires, now returns a Promise if you don’t provide a callback. This small change enables a more ergonomic way to program GL JS using the modern async/await JavaScript pattern, replacing a mess of nested callbacks.
Before:
After:
Improved clustered points on high zoom levels
We fixed an issue with point clustering where points were sometimes not clustered on higher zoom levels given a small cluster radius, causing them to disappear. Clustering is also updated to occur at all zoom levels, including the maximum zoom level given by clusterMaxZoom.
Fix for a race condition when evaluating image expressions
v2.1.1 fixes a race condition bug that occurred when the image expression is used with layers defined within a map style. Previously, it was possible for these expressions to be evaluated before the sprite images became available, resulting in inconsistent rendering of the images. This new release ensures that the sprite is available before evaluating image expressions.
Upgrading to v2.1.1
Mapbox GL JS v2.1.1 is available on CDN: include the JavaScript and CSS files in the <head> block of your HTML file to upgrade.
Like this article? Share it.
Maps feature data from Mapbox © Mapbox, OpenStreetMap © OpenStreetMap and their data partners, including Maxar (if applicable, © Maxar).
.png)
