New versions of our Maps SDKs are now available in beta for all Mapbox customers: GL JS v3 (web) and Mobile Maps SDKs v11 (Android, iOS). These new releases iterate on the previous versions and stabilize the foundation of our SDKs for exciting future development. They also introduce our new dynamic 3D style and improve the developer experience with cleaner code and support for more modern frameworks.

New 3D environments enhance wayfinding and location awareness

The new Mapbox Standard style enables a highly performant and elegant 3D mapping experience with dynamic lighting capabilities, landmark 3D buildings, and a beautiful symbolic aesthetic. Standard provides a base map that evolves alongside custom layers, delivering the latest data, rendering, and styling features without a manual update.

Support for Jetpack Compose, Swift UI and Other Frameworks

While our mobile SDKs were already compatible with declarative UI toolkits like SwiftUI and Jetpack Compose, v11 has been built with support for those technologies in mind from day one. Developers can now focus on crafting captivating mapping experiences with less boilerplate code, resulting in quicker iteration and simplified development. More information about Jetpack Compose and Swift UI support can be found in our documentation.

With GL JS v3, we’re loading parts of the library dynamically and only when needed, avoiding the performance costs of features that aren’t being used. As a result, we can deliver best-in-class performance whether you’re loading a lightweight 2D map or our latest Mapbox Standard 3D style.

Additionally, we’ve updated to WebGL2, enabling more sophisticated 3D rendering features and allowing for a richer and more performant map experience.

Improved performance

On the web, we eliminated stutter when panning a map with many symbols – a common issue for maps built with a lot of custom data points. We also improved the performance of clustered sources, resulting in 20% faster load times and 40-60% less memory overhead.

On mobile, the updated GeoJSON Source API allows developers to update single features instead of the entire GeoJSON dataset. This change significantly improves performance, particularly when animating large-scale datasets.

Improved profiling and debugging tools

In the v11 Mobile SDK, a strong emphasis on performance analysis is enabled through APIs that empower developers to pinpoint performance bottlenecks, whether from complex style, data, or device constraints.

The Tracing API (iOS, Android) offers a detailed overview of the operations performed by the rendering engine. This includes style loading, tile parsing, and rendering events. Notably, the Tracing API is efficiently integrated with XCode and Android Studio's performance profiling tools, ensuring a streamlined workflow for developers.

Additionally, the MapRecorder API (iOS, Android) provides developers with the capability to capture and replay map interactions. This is particularly useful for reproducing complex scenarios that require interaction with the map. The recorded sessions can be played back independently from the application where they were created, saving valuable time and resources when troubleshooting. When utilized with the Tracing API, it offers the potential to create benchmark suites for your style.

Completing the suite of new developer offerings, the Performance Statistics API delivers insights into vital rendering performance metrics. This encompasses metrics like the number of draw calls, the GPU memory usage and also identifies the most resource-intensive layers and render passes.

 {
 "cumulativeRenderingStats": {
   "drawCalls": 788,
   "textureBytes": 43456730,
   "vertexBytes": 17355252,
   ...
 },
 "perFrameRenderingStats": {
   "uploadGroupStats": {
     "maxMs": 14.71900177001953,
     "medianMs": 0.302
   },
   "topRenderLayers": [
     { "name": "trees", "durationUs": 1443 },
     { "name": "building-models", "durationUs": 1222 },
     { "name": "3d-building", "durationUs": 1091 },
     { "name": "water", "durationUs": 694 },
     { "name": "waterway", "durationUs": 641 },
     { "name": "poi-label", "durationUs": 626 },
     { "name": "natural-point-label", "durationUs": 360 },
     { "name": "road-label", "durationUs": 235 },
     { "name": "landuse", "durationUs": 222 },
     { "name": "road-number-shield", "durationUs": 215 }
   ],
   ...
 	}
 }

Mobile Maps SDKs v11 also brings numerous enhancements to the TileStore, such as resource groups, disk compression options, and support for the deletion of individual resources. These improvements offer greater control over tile management, giving developers new tools for delivering a consistent and performant user experience – online or off.

Improvements to map interactivity and customization

Image expressions now support two icon IDs which can be used as variants for light and dark scenes. We’ve also added a new property icon-image-cross-fade that controls the transitioning between these two variants.

Now, the style can be aware of the map lighting configuration using the measure-light expression, and you can change the layer styling or even cross-fade between different icon variants. This enables light to dark transitions that take full advantage of the dynamic lighting capabilities of our new Mapbox Standard style.

GL JS v3 now supports route lines with borders. The width and color of the line border can be specified. This eliminates the need for workarounds which require multiple line layers, saving CPU and memory usage and leading to higher performing maps. This is particularly relevant for complex navigation scenarios. It also brings parity to our SDKs and contributes to a cross-platform developer experience that is holistic and consistent.

Similarly, designers can now utilize expressions for the components of the HSLA value in GL JS v3. This gives them control over HSLA components directly and makes color management simpler and more flexible. The HSL color space defines color more inherently using hue, saturation and brightness and our customers often need to control these values separately.

And--we've enhanced our Camera APIs for the Mobile SDKs: addressing key ergonomic issues, cleaning up deprecated code, and aligning them with GL JS functionality. This includes making padding parameters optional and adding maxZoom and offset arguments to CameraManager.

It’s time to start building

Migrate to v3/v11 today to access these new features, performance enhancements, and more. You can find a full list of improvements as well as requirements and directions for migrating in our migration guides for GL JS v3 and Mobile Maps SDKs v11 for Android and iOS.

These versions build upon the architecture we introduced in v2 of GL JS and v10 of the Mobile Maps SDKs. Although we're using the major version bump to introduce a handful of breaking API changes, we think most users will find the migration process straightforward and the new versions iterative of their predecessors. 

If you’d like to get started using Mapbox, sign up for a Mapbox account, then visit the above mentioned migration guides for information about our latest versions.