What are Style Components?
A Style Component is a group of associated layers that together represent a common cartographic feature. “Roads” and “Place labels” are examples of components. Components wrap thousands of decisions made by our cartographers into a simple, curated set of controls for color, typography, and feature density.
Each component includes built-in styles, as well as a set of options unique to the features the component contains. For example, the “Roads” component allows users to toggle traffic on or off, or to change the style of highway shields from a predefined set of styles. A “Place labels” component on the other hand, offers users the option to adjust label density or show or hide icons next to place labels. The options within each component are designed by cartography experts at Mapbox to be as meaningful and impactful as possible.
What are the benefits of the Style Components in Studio?
Components make customizing maps easier and faster in Studio by reducing the number of decisions needed to get the desired outcome.
How do I start using Style Components?
Any new style you create in Mapbox Studio will automatically have components enabled. All of our core styles have been rebuilt using components. Each core style leverages components in their own way – setting properties, colors and more to provide the best starting point for you to customize your map.
How do the color and typography settings work?
Color and typography settings are shared across every component in a style. When you make changes to color or typography settings on a style, those changes always apply across every component. This makes it easier to keep your map’s styles synchronized.
Can I customize the map in ways that aren’t supported using just the components interface? For example, can I change the zoom level styling set by components?
Yes, for any styling beyond the simple selections in components, you can customize any of the properties controlled by components through overrides.
Overrides give you control over those finer details you want control over, but without losing the overall benefit of the controls provided by components. You can override a property and also reset a property back to being controlled by the Component. It’s easy to experiment this way with little risk to the overall style.
Do I have to use components for a new style?
When you pick from the list of core styles, they will by default use components in the new Studio. If you want a full custom layer editing experience in lieu of a component, you can remove the component properties through a feature called ejection. Ejection ungroups the layers that formed the component and returns those layers to free form styling options. Once a component has been ejected, you cannot add the component back to your map, so only eject if you’re sure you want complete control.
Can I add and remove components from my style?
While this functionality is not in the Studio public beta, we have plans to add this functionality in time. Adding and removing components will enable designers to take a blank style and add in only the components they want.
Can I bring & style my own custom data?
Yes, similar to the current Studio, you can bring and style your own custom data. Simply go to the “layers” panel in the Studio public beta and click the “Add new layer” button.
Has the workflow changed for layer editing?
No. In the Studio public beta, we have 100% support for all previous layer editing capabilities.
How performant are styles made with components in comparison to styles only made with layers using expressions?
In your app, website, or embedded device, styles made with components are no different from any other type of style. There should be no performance differences.
