Mapbox GL JS v3 enables the Mapbox Standard Style, a new realistic 3D lighting system, building shadows and many other visual enhancements, and an ergonomic API for using a new kind of rich, evolving, configurable map styles and seamless integration with custom data. You can get more information about the new features in the Mapbox GL JS v3 migration guide.
Breaking changes ⚠️
- Discontinue WebGL 1 support. WebGL 2 is now mandatory for GL JS v3 usage, aligned with universal browser support.
- Remove the
optimizeForTerrain
map option (layer rendering on globe and terrain is always optimized now).
Features and improvements ✨
3D Lights
- Introduced a new 3D Lights API that supports directional and ambient light sources to give you control of lighting and shadows in your map when using 3D objects.
- Add new
*-emissive-strength
properties for styling layers with the new lighting API. - Introduced flood lighting for the extruded buildings' walls and the ground beneath them.
- Introduced ambient occlusion to affect the ground beneath the extruded buildings.
- Introduced
measureLight
expression lights configuration property: Create dynamic styles based on lighting conditions. - Added support for shadows cast from fill extrusions.
- Introduced
hsl
andhsla
color expressions: These expressions allow you to define colors using hue, saturation, and lightness format. - Add support for fading out 3D layers in the distance with
fill-extrusion-cutoff-fade-range
andmodel-cutoff-fade-range
style properties.
Style Composition with Imports
- Introducing support for nested and configurable styles. You can now import other styles into your main style, with updates to imported styles automatically reflected in your main style. Configuration properties can be set for imported styles, making them customizable.
- Introduced concept of
slot
s, pre-specified locations in the style, where your layer can be added (e.g., on top of existing land layers but below all labels). - Introduced
config
expression: Retrieves the configuration value for the given option. - When no
style
option is provided to the Map constructor, the Mapbox Standard Style is now enabled as a default. - Add a
style.import.load
event to track the loading of imported style fragments.
Terrain Improvements
- Improve terrain sampling accuracy.
- Improve zooming and panning over dynamic terrain so that it feels smooth.
- Improve performance for styles that use both hillshade layers and terrain.
New Raster Features
- Introduced raster colorization via
raster-color
paint properties. - Introduced
raster-value
expression: Returns the raster value of a pixel computed viaraster-color-mix
.
…and more!
- Add support for controlling the vertical fog range with
vertical-range
style property. - Introduced rounding fill extrusion edges for a smoother appearance.
- Introduced the
icon-image-cross-fade
property, which controls the transitioning between the two variants of an icon image. - Introduced
random
expression: Generate random values using this expression. Use this expression to generate random values, which can be particularly helpful for introducing randomness into your map data. - Introduced
distance
expression: Returns the shortest distance in meters between the evaluated feature and the input geometry. - Add support for elevating symbols over buildings & other 3D layers with
symbol-z-elevate
style property. - Improve rendering of stars on globe view.
- Add the
renderstart
event, which, combined with therender
event, can be used to measure rendering frame duration. - Enable zoom-based expressions for model rotation, scale, and translation.
- Optimize shader compilation to reduce stuttering on complex 3D styles.
- Reduce flickering of symbols along lines due to rounding errors.
Bug fixes 🐞
- Fix the accuracy of the atmosphere gradient when rendering the globe.
- Fix a bug with horizon placement when map
padding
is used. - Fix a bug with horizon rendering on Windows/NVidia.
- Accessibility fixes: remove
tabindex
when the map is not interactive; removerole="list"
from the attribution control; addrole="img"
to markers (h/t @kumiko-haraguchi and @aviroopjana). - Fix the order of layers in
queryRenderedFeatures
results on maps with globe and terrain. - Fix an error when zooming out on certain globe views using the GL JS development bundle.
- Fix an error on
map
hasImage
andupdateImage
after the map was removed. - Fix rendering of line layers with data-driven
line-border
. - Fix an issue with symbols sometimes not rendering correctly over the terrain on a top-down view.
- Remove duplicate frag precision qualifiers
Changes since v3.0.0-rc.2
Bug fixes 🐞
- Fix stale source caches in imports on projection change.
- Fix style not updating properly when adding new imports.
- Fix the breakage of ground effect that occurs when edges cross tile boundaries.
- Fix circle layer depth occlusion not working properly with the orthographic camera.
- Fix diffing of the styles with imports on
setStyle
. - Fix GL JS bundle in environments that transpile minified code with async/awaits.
- Fix
queryRenderedFeatures
when the model layer is present in the style. - Fix stale 3D lights when removing individually.
- Fix source name collision between imports in symbol layers.
- Remove duplicate frag precision qualifiers.