Adding more customization to the map
By: Chloe Krawczyk
Maps tell stories by tying information to place. We display information on maps with visualizations that encode numeric data into color and geometry, but we also rely on text to express many concepts.
The most straightforward story we tell with a text label is “this is the name of that place,” but for many stories, we want to use the map to tie multiple concepts together — “this place has counterproductive zoning laws and high infrastructure costs and high carbon emissions.” When we add layers of context, we want to allow the reader to quickly shift their attention between the different layers, so that their mind can create an integrated concept of place.
When we use text to connect multiple concepts, we can use formatting to help the reader distinguish context. Perhaps we make the name of a place larger and include different types of information about that place using smaller text in different fonts. That’s why we’re excited to announce that starting in Mapbox GL JS v0.48, iOS SDK v4.6 and Android SDK v6.7, you can access rich formatting options for all text labels on the map:
In the Mapbox style specification, we represent formatted text with a new formatted data type, and support using formatted strings on any layers that use the text-field property. Create formatted strings using the new format expression:
"text-field": ["format",
["get", "title"], {}, // Use default formatting
"\n", {},
["get", "subtitle"],
{
"text-font": ["literal", ["DIN Offc Pro Italic"]],
"font-scale": 0.8
}
]
Each element of a formatted string inherits formatting options from the parent text-field, which can optionally override the text-font and font-scale properties. All elements in the string will be drawn in a single operation, and they will all be treated as a single unit for collision detection purposes. This means that all overlap, sorting, and collision behavior for a label with a formatted string will work the same as its unformatted equivalent.
Today, creating a formatted string requires directly invoking the underlying format expression, but in the future, expect tools like Mapbox Studio to make formatting a simple operation. Also, over time, we plan to expand the feature with additional override options (such as text-color).
We make the tools, but you tell the story — show us what we need to know about the places that surround us. Get started with this example.
Create clear context with rich text labels was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.