New scaling and styling capabilities support clear, responsive, and expressive map design

Today’s digital maps need to work everywhere — from desktops to small mobile screens to in-vehicle displays — and remain clear, readable, and intuitively interactive. New icon and text rendering updates from Mapbox make it simpler to develop and design maps for different screen environments across platforms: Global scale factor and styling definitions for icon and text appearance.

Global scale factor controls how text and icons resize across devices. Style definitions can trigger automated changes to icons or text appearance in response to a specific interaction. Both rendering features make it simpler to customize the map experience on any screen.

Keep maps readable across every screen with global scale factor

Global scale factor enables consistent scaling of icons and text labels to ensure maps look their best across a diverse range of device dots-per-inch and viewing conditions.

Previously, map designers had to maintain multiple, device-specific map styles or use experimental workarounds to ensure icon and text legibility on different screens. With the new global scale factor, a single map style can programmatically adjust the scale of elements when rendering client-side. The scaling behavior can be previewed in the style in Mapbox Studio, making it easy for developers and designers to collaborate on scaling settings. Icon and text scaling is now simple, predictable and consistent, whether increasing scale for accessibility settings, fine-tuning maps for automotive displays, or optimizing readability for large-format screens.

Control how and when the map scales

Mapbox global scale factor focuses only on icons and text labels so the map view stays the same while important information becomes easier to read. Unlike pixel ratio adjustments, global scale factor avoids layout shifts and keeps spatial context intact.

Global scale factor is intentionally developer-controlled, enabling flexibility to decide when and how scaling happens. Developers can easily hook into device accessibility settings or use dots-per-inch information to trigger scaling adjustments that meet specific requirements.

Dynamic icons and text made delightfully simple with appearance configurations

An icon or text label ‘appearance’ is a defined visual state on a Mapbox map. By configuring automatic appearance settings, an icon or text label can have multiple visual states. For example, an electric vehicle charging station icon might use a green design as its default appearance to indicate availability. The same icon could shift to orange if it is in use or red to show that it is unavailable. Mapbox previously released simplified icon appearance configurations to trigger a change in icon color, size, rotation or position. Now similar configurations are also available for text labels.

Until recently, making icons and text labels dynamic and interactive required extra assets, custom rendering logic, and platform-specific development. Each element was limited to a single, static look. If a developer wanted to visually reflect real-time changes, they needed to write platform-specific code and manage separate element definitions for each design variant. 

With Mapbox appearance controls, developers can consolidate icon and label design into a single map style. The new addition of Layer JSON editing in Mapbox Studio ensures that configuring appearances and previewing the changes in the style is intuitive and efficient.

Developers simply define the default appearance of an icon or text label in the map style, along with definitions for any other appearance options and what conditions should trigger changes between them (such as user interactions, data state changes, or zoom level). Appearances can be configured once directly in a map style or added and updated with the runtime map rendering API, behaving consistently across web and mobile. 

Enhance depth, clarity, and visibility with simpler paint properties for appearances

Mapbox has also expanded the control over the styling properties that are available when defining icon and text label appearances. New simpler syntax makes it easier to modify how color, opacity, and emissive strength react to feature states or zoom levels. The changes make it simpler to visually communicate or emphasize particular details on the map.

‍Better together: Clarity and expression in one system

Global scale factor and enhanced icon and text appearances are designed to complement each other. Global scale factor ensures the map stays readable. Icon and text appearances ensure the map stays expressive and interactive. The result is a map that adapts to different devices and environments, communicates information clearly, and responds dynamically to user interaction — all while being simpler for developers to build.

Global scale factor is now available in public preview. Read the global scale factor documentation for web, iOS and Android to get started. All icon and text appearance configurations are now generally available: See the appearances documentation in Mapbox Style Specification and examples for web, iOS and Android. 

Pay-as-you go customers using Mapbox GL JS can also take advantage of recently updated pricing. Mapbox has expanded its public pricing tier from 1 million to 5 million monthly maploads, reducing the rate to $2.50 per 1,000—down from $3.00—making it more affordable to scale without a contract.

FAQ

What is Mapbox global scale factor?

Mapbox global scale factor is a capability that allows for the linear scaling of icons and text — across an entire style. Developers can set a scale factor either during the design phase in Mapbox Studio or dynamically at runtime via the Mobile SDKs or Mapbox GL JS. 

Does Mapbox global scale factor make the map scale automatically to device settings?

Mapbox global scale factor does not automatically make the map scale to the device settings. It requires developers to set up the scale factor manually. To gives developers with full control over the map experience, ensuring it only scales when and how a developer intends, preventing unexpected layout shifts, and allowing the creation of custom mapping logic for different hardware environments using a single style.

How do developers implement Mapbox global scale factor?

Developers use the runtime API to apply a scale factor based on the conditions they choose, such as the device’s dots-per-inch resolution, or the user’s system-level accessibility/font-size settings. Designers can use Mapbox Studio’s new scale configuration option to experiment and see how the map element scaling acts in response to global scale factor. However, the scale factor is a runtime API that cannot be embedded into the style.

How does Mapbox global scale factor support accessibility?

Mapbox global scale factors offers a simplified way for developers to scale up text and icon size to address the visibility requirements that a user has set on their own device. 

While the Mapbox SDKs do not automatically listen to system accessibility changes, developers can easily implement this by first detecting the system’s font size or accessibility scale factor. Then, passing that value (or a mapped version of it) to the Mapbox runtime API using the manual scale factor setting. Follow the examples on iOS and Android to get started with this.

What are Mapbox appearances?

An Appearance is a way to define a specific visual state for a symbol or feature on a map. Instead of having a single, static look, developers can create multiple appearances that each have a unique combination of layout and paint properties for icons and text, such as icon image, size, and rotation.

For example, a charging station icon might have a default appearance of green, but upon data changes, its appearance can be changed to a red "unavailable" or an yellow "in-use" state. Appearances allow you to define these different looks directly in your map's style, making it very simple to manage your map's visual states.

Why is the new Mapbox appearances functionality important? 

Previously, changing a symbol's appearance based on data or user interaction required complex, platform-specific code for web and mobile. The new appearances functionality allows developers to define these different visual states directly in the map style, making it simple to change a symbol's look in a consistent way across all platforms without writing custom code.

What layout properties can be controlled with appearances? 

Appearances supports adjusting icon and text layout properties upon map data chance or interaction. For icons, these properties include the image background, distance offset from the anchor point, clockwise rotation, and scaling. For text, these properties include distance offset from the anchor point, clockwise rotation, and scaling. Find a list of the supported properties in the appearances documentation page: https://docs.mapbox.com/style-spec/reference/appearances/ 

What paint properties can be controlled with appearances? 

Appearances supports adjusting icon and text paint properties upon map data change or interaction. For icons, these properties include icon color, halo color, intensity, and fade, and icon opacity when it is being occluded. For text, these properties include text color, halo color, intensity, and fade, and text opacity when it is being occluded.