Mapbox-gl-js: text background

[andrewharvey]

Motivation

I'm thinking about using a rectangular or rounded background behind text, like this. As far as I can tell this would need to be supported in the style spec, as it's not possible at the moment.

@mapbox/maps-design any thoughts? Do you think it's worth including this feature, or is it too specific to implement in the style spec?

[mb12]

@andrewharvey Is this any different than the highway shield? The shield image automatically resizes depending on the text over the shield image.

https://github.com/mapbox/mapbox-gl-js/pull/2720

[andrewharvey]

@andrewharvey Is this any different than the highway shield? The shield image automatically resizes depending on the text over the shield image.

As I understand it, highway shields are just symbol icons set to allow overlap between the icon and text. They are fixed images, and don't resize or fit the text in any way. Yes you can use the length expression to use a different size shield based on the text length, but that only works for monospace text, and is only really suited for short refs

[mb12]

@andrewharvey My understanding is that if you use icon-text-fit, it should stretch the image. Its default value is none. By default it does not stretch the image. if you use icon-text-fit with "both" in a your regular shield style rule, it would stretch the image.

https://github.com/mapbox/mapbox-gl-js/blob/master/src/style-spec/reference/v8.json#L1081

[andrewharvey]

Thank's for pointing that out @mb12! It isn't in Mapbox Studio so I missed it. I think that allows a crude workaround, but it still can't do

• corner rounding (they would get stretched)
• color as a paint property

[stevage]

You could probably achieve some kind of workaround using Markers. Which sort of gets me thinking about some weird symbol/marker hybrid that is attached to data, but rendered using the DOM. Then you'd have enormous scope for creativity, at the cost of performance. Maybe using the forthcoming layer plugin architecture...

[ChrisLoer]

Could you do color as a paint property by using icon-text-fit with an SDF icon?

I don't know a solution to corner rounding beyond "vector icons" (cc @jfirebaugh).

Tagging @mapbox/maps-design again since it doesn't look like the tag worked in the original comment.

[stevage]

Ok, I tried out the hacky workaround. I'm actually pretty impressed how well it works!

https://bl.ocks.org/stevage/23d881a66e2bcca385d8cc074691b674

[andrewharvey]

Great example @stevage of how it's possible to do this in GL JS right now!

I still think it would be nice to have this in the style spec for cross platform support, performance and ease of doing all the styling directly in Mapbox Studio without any custom code. You can almost do it right now with a large halo radius, but you get gaps between each letter.

I've seen it a number of times with just a plan rectangular background.

Since it would need to be tightly coupled with the symbol text rendering to get size, not sure if it's possible to do as a custom layer (using the forthcoming API).

[stevage]

If it is going to be part of the style spec, maybe doing this through the halo- properties would make sense? Perhaps:

• text-halo-style. Defaults to "character". Controls how the halo is drawn. "character": a circle is drawn around each character individually. "rounded-rectangle": a single rounded rectangle is drawn around the whole label. "rectangle": a single squared rectangle is drawn around the whole label.

[nickidlugash]

Nice example, @stevage!

Regarding any additional spec updates, my understanding is that these specific asks (corner rounding, color properties, etc) and more would all be accommodated by the introduction of vector icons. At this point I think what makes the most sense is to focus on developing a more flexible system with vector icons rather than invest more development time into specific features for raster icon manipulation that don't serve the majority of needs. For example, the text-halo-style options suggested above may meet some people's needs, but not others who want custom shapes (e.g. for highway shields).

Regarding the icon-text-fit property and SDF icons, the reason these are not represented in Studio is because they were both attempts to accommodate these types of use cases, but we realized that they don't fully meet users' needs and it would take a lot of investment to make them more viable (which is time that could be put into vector icons). @andrewharvey @stevage If these features or Markers can reasonably be used to meet your immediate needs, would that be acceptable for now?

(Just my 2c here – folks working directly on symbol rendering would be able to give a more definite response).

[andrewharvey]

It's not urgent, nor a customer request, and the workaround using a Marker for most cases is good enough.

@stevage I like your idea to make the halo option either per character or per label.

I'm unsure if this is a good fit for vector icons, especially once you have curved labels... :thinking:

[stevage]

Yeah, I also have no immediate needs. I'm actually pleasantly surprised how well this technique worked, I'll definitely try it for more creative styling in the future. Should open up interesting possibilities for styling points - pretty much anything you can do within the DOM. Somehow the term "Marker" limited my imagination unnecessarily.

[ryanhamley]

Somehow the term "Marker" limited my imagination unnecessarily.

This is an interesting point. I also think there's a good amount of confusion over the fact that you can effectively duplicate much of the Marker functionality with a symbol layer. Markers are definitely something that need some love. Maybe a couple of examples showing what can be done with markers would be helpful; this example would be a great start, IMO.

[1ec5]

4143 would make it possible to implement the capsule shape as a single resizable image.

[andrewharvey]

@1ec5 I hadn't connected the fact that #4143 would unlock this, so thank you!

I can't think of any way the use case described in this ticket can't be catered for by #4143 so I'm happy to close this as a duplicate of #4143.

[stevage]

Hmm, I would consider #4143 a pretty hacky workaround for this. You would need to construct an image (presumably PNG) of the right background colour, and hence lose the ability to adjust color in the style itself.

[dagjomar]

Just to comment here, this is a feature I have been missing myself.

I wanted to draw driving routes along with "shields" on top of the route with time and distance information, exactly like the "white rounded square with text" as shown above.

The problem with any DOM-rendered solution is the lack of automatic clustering

[bart-1990]

Is there any progress on this? It would be amazing to have this feature. :)
The marker workaround does not work for our use case because of degraded performance.

[gwyneth-bassett]

This feature would be extremely useful, I have the same issue with the performance of markers and am trying to find a workaround to make halos rectangular

[andrewharvey]

I'll close this now since it's possible with stretchable icons #8917

[andrewharvey]

rounded.png

code

map.loadImage('rounded.png', function(error, image) {
    if (error) throw error;
    if (!map.hasImage('rounded')) {
        map.addImage('rounded', image, {
            content: [3, 3, 13, 13],
            stretchX: [[7, 9]],
            stretchY: [[7, 9]]
        });
    }
});

map.on('load', function () {
    map.setLayoutProperty('country-label-lg', 'icon-image', 'rounded');
    map.setLayoutProperty('country-label-lg', 'icon-text-fit', 'both');
});

result :tada:

I put this together to help understand what stretchX, stretchY and content were meant to be.