Mapbox Style Updates: More flexible configurations for the 3D basemap

Guest

Guest

August 29, 2024

Mapbox Style Updates: More flexible configurations for the 3D basemap

Guest

Guest

August 29, 2024

The Mapbox Standard style is a carefully curated and highly performant 3D map style available to all developers. The latest updates to Mapbox Standard include improvements that expand the usability and flexibility of the style to support a wider range of applications and navigation scenarios. This includes more flexibility with visual styling, an updated Standard Satellite style, enhanced 3D configurations, and more. 

A primary benefit of Mapbox Standard is that updates take effect automatically, without requiring time-intensive manual style edits that risk breaking changes. All of the new features described below are now available to all Mapbox accounts using Mapbox Standard.

Monochrome and Faded color themes enhance design flexibility

Mapbox Standard now offers a choice of themes, which are new overall color configuration options that work in tandem with the existing Mapbox Standard style light presets for Dawn, Day, Dusk, and Night. The monochrome and faded color themes provide more aesthetic flexibility and are especially useful when using Standard for data visualizations or with extensive custom data layers. 

The new color themes allow for customization of Mapbox Standard without the need for extensive manual adjustments. Mapbox cartographers designed the themes to make it easier for developers and designers to align map styling with common application scenarios and user requirements, in many cases eliminating the need to craft custom styles from scratch.

For example, in a navigation app the new ‘Faded’ theme improves the visibility of the most important map elements like route lines and the puck. The ‘Faded’ theme also competes less with UI/UX elements like buttons and settings, ensuring that those stand out clearly from the map.

Mapbox Standard Faded with the Day light preset
Mapbox Standard Faded with the Night light preset

Themes can be selected in Mapbox Studio or at application runtime. A theme will override the basemap colors and lighting, but will not apply to custom layers.

New Satellite style brings the Standard benefits to an imagery basemap

A new Mapbox Standard Satellite style combines updated satellite imagery and vector layers, bringing the benefits of Mapbox Standard to a global imagery-based basemap.

Mapbox Standard Satellite with Night and Day light presets

Like Mapbox Standard, the Mapbox Standard Satellite style receives all updates automatically and supports light presets. The style introduces two new configurations: showRoadsAndTransit and showPedestrianRoads. Users can choose to hide roads, simplifying the style to focus on specific areas or features. Additional details about map style configurations are available within Mapbox documentation.

Many applications offer both a styled basemap and an imagery basemap option, requiring map designers to maintain and test two separate styles. In Studio, it is now possible to switch the basemap between Standard and Standard Satellite on the fly, streamlining style development and eliminating the need to create extra styles.

3D visibility configuration enables quick 2D option

For developers who prefer the styling and technical advantages of Standard but need a 2D-only map style for design or performance preferences, it is now possible to turn off all 3D models and convert Mapbox Standard into a lightweight 2D basemap. 

The map will still use the same dynamic light settings that automatically create day and night styles without having to maintain separate stylesheets. The 3D models can be turned off in Studio.

Improved label placement reduces clutter

Until now, Mapbox Standard rendered all labels and icons on top of buildings. In a pitched map view, the view angle can cause the labels and icons to become cluttered. A new 3D occlusion feature recognizes if a label is in front or behind a 3D model and selectively removes or reduces the opacity for distant features.

Old: Cannot see road labels that are behind buildings. Gate and building labels are on top of buildings and clutter the map.
New: Road labels are shown on top of buildings in pitch view. Gate and building labels are hidden behind buildings to declutter the map.

Road labels are now rendered on top of buildings, but with a slight overlap so they are still legible and are not truncated. Road labels that are fully or mostly obscured by 3D features are removed. The road label changes improve map aesthetics, reduce visual clutter, and prioritize readability in most applications, particularly for dynamic navigation apps.

Smooth building fade improves performance

Mapbox Standard now has a smoother load experience for 3D buildings made with the  building fill extrusion layer. In a bird’s eye view or navigation application, buildings fade in as they come into view. This reduces clutter on the horizon and improves performance by only loading buildings when necessary. The user experience also feels smoother with an animated scaling effect.

3D clipping layer clears space for custom models

When adding custom 3D models or fill extrusion layers, it is sometimes necessary to remove existing 3D models within Mapbox Standard; for example, when visualizing a proposed building development. In such cases, it is now possible to define a custom polygon within which all existing buildings, 3D models, and symbols are removed. The new ‘clip’ layer type removes competing elements within discrete areas while retaining the 3D layers of Standard elsewhere in the map.

Left: Basemap. Middle: Add clip layer polygon. Right: Remove clashes.
“Mapbox Standard and the 3D capabilities offer high performance rendering for our 3D festival maps. The flexibility of turning off the 3D models completely or in a specific location helps us add smooth, beautiful and true-to-life festival structures that significantly enhances the festival experience for our users. Then the dynamic shadows make everything pop!” - Experience Designer, Amplify.one

Line occlusion opacity enhances wayfinding

A new option to define line occlusion opacity provides control over how much of a line feature, such as a route, is visible through 3D features. Lines can be shown completely on top, semi-transparent (opacity range 0-1), or completely occluded behind buildings or terrain. The ability to tailor line visibility in a 3D environment improves user comprehension of upcoming route directions when their path goes behind buildings or terrain.

Vertical offset better integrates lines into 3D space

Line layers can now be set to use a constant elevation or a relative elevation based on the underlying terrain. In addition, the option to add a vertical ‘z’ offset allows lines to be placed above symbol layers instead of only draping them directly onto 3D terrain. Draped lines are no longer rasterized but rendered as a crisp vector.

Coupled with line occlusion opacity, the new offset feature helps to integrate 2D custom layers into the 3D map space by adding an extra dimension. Line layers can now be given a height value which can make it easier to integrate them with other 3D layers such as fill extrusions and models. 

Elevated building lines

The vertical dimension also unlocks creative styling capabilities, such as visualizing a boundary or route line within vertical space.

Elevated route lines in a navigation app

Improvements available now in Mapbox Standard

The new features and configuration options of Mapbox Standard are now available to all accounts, with updates rolled out to existing Mapbox Standard users automatically. Detailed documentation of Mapbox Standard features is available for web, iOS and Android.

To start using Mapbox Standard, the style is available in the latest versions of the Mapbox Maps SDKs. Mapbox Documentation includes guidance on migrating to GL JS v3 and the Mobile Maps SDKs v11 for iOS and Android. Standard is also available in the Mapbox Navigation SDKs and the Dash in-car application. To preview Mapbox Standard, explore the style here.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

response = requests.get(

  "https://api.mapbox.com/v4/mapbox.temperature-raster-tileset/tilequery/40,-105.json",

    params={

        "layers": "temperature,wind_speed",

        "bands": "1708304400,1708311600",

    },

Optional caption
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod maximus porta. Pellentesque vitae augue elit. Nam semper eros leo, nec hendrerit nunc aliquet quis. Morbi ac sapien tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur porta imperdiet lorem, ut aliquet orci pellentesque quis. Donec magna augue, molestie aliquam enim eu, auctor feugiat metus."

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

No items found.
No items found.

Related articles