Why Mapbox chose symbolic realism for the 3D basemap

The symbolic realistic design of Mapbox Standard provides a performant and flexible basemap for custom data, and a map that reacts to dynamic light conditions.

Guest

No items found.

Guest

February 22, 2024

Why Mapbox chose symbolic realism for the 3D basemap

The symbolic realistic design of Mapbox Standard provides a performant and flexible basemap for custom data, and a map that reacts to dynamic light conditions.

Guest

No items found.

Guest

February 22, 2024

When creating Mapbox Standard, Mapbox designers set out to use 3D environments and dynamic lighting to create a more immersive map that is simple, legible, and configurable.

They considered two design paradigms: symbolic realism and photorealism. Ultimately they embraced symbolic realism. Symbolic realism has a long tradition in cartographic history. It was first mentioned by Alfred Korzybski in his famous quote: “A map is not the territory it represents, but, if correct, it has a similar structure to the territory, which accounts for its usefulness”. In other words, the map should be a symbolic representation of reality and not an exact replica. 

The symbolism of Mapbox Standard uses existing cartographic conventions creating a map space that is immersive and responsive to a user’s current location. Here’s why this choice was made.

Marseille, France

Visual Hierarchy and A Showcase for Custom Data

Digital map design leverages dynamism - 2D layer symbology is not the same at all zoom levels. Nor does it vary by location. So why should 3D objects be treated differently? For example, more complex road networks are displayed when the map is more zoomed in. 3D map design should follow this same logic.

This also means that the 3D elements should work for the end user, not against them. Visual hierarchy and consistent symbology helps the environment make sense, often through subliminal association. With a ‘realistic’ photography based 3D map, the entire scene is presented with a very limited visual hierarchy - roads, buildings, rivers are all merged into a homogenous view that is difficult to interpret. As with a photo, the entire topography is one object, without attribution to allow for filtering and styling each element. Custom data draped on top is difficult to discern because the basemap has so much visual information.

With Mapbox Standard, custom data can be placed within layers and styled to stand out. The map provides a distinct visual hierarchy which helps viewers make better sense of their environment. It becomes much easier to tailor a map to a specific need and build applications that incorporate disparate configurable datasets.

Dynamic lighting establishes depth and reflects real-world conditions

Mapbox Standard adds a new level of dynamism, enabling layers to react to changing light conditions. A new global lighting and shadow model integrates basemap elements and 3D models. Without this model, it’s difficult to delineate between elements and quickly establish a sense of depth in more complex scenes. 

Left: the new global lighting and shadow model creates contrast and makes map elements more distinguishable. Right: without the new model, the same location feels washed out.

Realistic lighting also provides a physical connection between the viewer and their environment - so the user is better oriented and 3D objects are not incongruous with the map.

For lighting, designers created a new global property called ‘brightness’. In a similar way to zoom, it can be used to interpolate paint properties. Here it’s used to invert labels & icons, or adjust model colors. 

To ‘ground’ the rest of the content, the impact of labels in a pitched view was carefully considered. Designers focused on a minimal approach to avoid ‘label soup’. They implemented automatically elevated labels & icons, and a new placement method based upon the pitch of the map and distance from the center of view. 

Enhanced 2D maps

The symbolic design improves the ability to create an enhanced 2D map from 3D features by adding an orthographic view, rendered in plan without any perspective. This is useful because 3D maps can look cluttered and unrefined in an aerial view. Now 3D elements seamlessly and legibly transition to 2D in a way that extends the usefulness of the map.

Performance and consistency

The designers also set out to build a scalable, lightweight 3D style to make cross-platform applications as performant as possible. However, recreating the world in 3D can quickly amass large file sizes in terms of meshes or textures. The nature of the symbolic design allows designers to use meshes attributed with surface parts without any baked-in lighting or material maps. This is applied at run-time and significantly improves performance.

Mapbox custom designs all 3D landmarks. The approach is to mimic how the rest of the basemap is styled, where color is used to create repeatable recognizable symbology. This provides map consistency whether navigating in Timbuktu or Tokyo.

A final approach is the abstraction of reality. Only key landmarks are custom modeled, giving the user enough context without map clutter that adds no value.

Consistent building symbology across the world with only key architectural design features makes landmarks recognizable without clutter.

The 3D elements are designed for a fine balance of accuracy, performance, and stylistic simplification. To optimize the modeling process, 3D artists have created automated techniques to simplify & standardize architectural details while retaining the essence and distinguishing elements of the structures. 

Facade simplification

Leverage symbolic realism in applications

Mapbox Standard, the 3D basemap, and the map experiences it unlocks are now available to all customers with the most recent versions of our web and mobile solutions. To migrate to these new versions, or to begin using them as a new customer, see the documentation for GL JS V3 and Mobile Maps SDKs v11 for iOS and Android.

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