-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
text background #6856
Comments
@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 |
@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 |
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
|
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... |
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. |
Ok, I tried out the hacky workaround. I'm actually pretty impressed how well it works! https://bl.ocks.org/stevage/23d881a66e2bcca385d8cc074691b674 |
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). |
If it is going to be part of the style spec, maybe doing this through the
|
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 Regarding the (Just my 2c here – folks working directly on symbol rendering would be able to give a more definite response). |
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... 🤔 |
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. |
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. |
#4143 would make it possible to implement the capsule shape as a single resizable image. |
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. |
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 |
Is there any progress on this? It would be amazing to have this feature. :) |
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 |
I'll close this now since it's possible with stretchable icons #8917 |
rounded.pngcodemap.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 🎉I put this together to help understand what stretchX, stretchY and content were meant to be. |
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?
The text was updated successfully, but these errors were encountered: