-
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
Support multi-icon symbols #4366
Comments
/cc @mapbox/gl |
Combining this with the very similar #4436. Note the nice example there: |
is it even possible to realize? |
Expressions open up the door for a different design alternative: some kind of Something like: // new "symbol-content" layer property, incompatible with the "text-field", "icon-image", and "*-{offset,ignore-placement,allow-overlap}" properties
"symbol-content": [ "symbol-layout",
["text", ["get", "name"], { size: 13, offset: ..., color: ...}],
["text", ["get", "population_density"], { size: 11, offset: ..., color: ...}],
["text", "ppl / km^2", { size: 11, offset: ..., color: ...}],
["icon", "dot.sdf", { size: ..., offset: ..., color: ... }],
...
] |
We're making progress on this in #7015, which adds support for multiple fonts/sizes within a single text label. Controlling paint properties (e.g. color) and adding multiple icons will go in later PRs. |
The current road name label in the navigation SDK could take advantage of this option to display a route shield alongside a road name in a single point-placed symbol. The iOS implementation uses a native view (mapbox/mapbox-navigation-ios#1576), but runtime styling would be desirable for the Android implementation (mapbox/mapbox-navigation-android#1222) for various reasons, so this feature would allow us to achieve the same effect on both platforms. |
Renaming this to "Support multi-icon symbols" as multi-text has landed on GL JS as #6994 and on GL Native as mapbox/mapbox-gl-native#12624. Example here: https://www.mapbox.com/mapbox-gl-js/example/display-and-style-rich-text-labels/ |
Hi guys, I was wondering if there was any update on this feature or any similar one that would enable putting two images over each other in one Symbol layer? |
I am also looking for an update on this issue and wondering if this is something that is still being worked on. |
@shayanaijaz This is not on our roadmap at this time, but we did introduce formatted text with inline image support in v1.6. See this blog post for more details. |
This is 100% possible with the expression syntax.
If you have a property, you can query it and use it in the layer definition to display different icons:
|
Motivation
I want to show a complex set of icons: ~100 basetypes with ~30 modifiers. There is no way to predefine ~3000 icons in the PNG sprite and then just pick the right one. I want to define ~130 and combine them freely. That already works by using two independent layers, but then "basetypes" and "modifiers" are on different z-indices so they interfere with each other.
Design Alternatives
Design 1: make "icon-image" accept an array (has to be implemented on other "icon-" options like "icon-offset" as well)
Design 1a : don´t use an array on every single property but shift it up the to the "paint" and "layout" property.
Design 2: allow the definition of combined icons in the sprite JSON
Design
Advantages Design 1: dynamic styling
Drawbacks Design 1: complex due to multiplication of icon-properties by number of icons
Advantages Design 2: combined icons would show up like normal icons in the stylesheet
Drawbacks Design 2: need for hard coded combined icons
The text was updated successfully, but these errors were encountered: