Support multi-icon symbols

[indus]

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)

...
"icon-image": ["{basetype}", "{modifier}"]
...

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

...
"basetype":{"x":0,"y":0,"width":20,"height":40,"pixelRatio":1},
"modifier":{"x":20,"y":0,"width":20,"height":20,"pixelRatio":1},
"combined":{"icons":["basetype","modifier"], "offset":[[0,0],[0,20]]}
...

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

[1ec5]

/cc @mapbox/gl

[jfirebaugh]

Combining this with the very similar #4436. Note the nice example there:

[dayAlone]

is it even possible to realize?
and how many changes need to be done in the render methods?

[anandthakker]

Expressions open up the door for a different design alternative: some kind of symbol-layout expression that's used to compose icons and runs of text into a single 'rich symbol' that's then treated as a single unit for placement/collision/z-ordering purposes.

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: ... }],
    ...
  ]

[ChrisLoer]

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.

[1ec5]

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.

[ChrisLoer]

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/

[Tomcatus]

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?

[shayanaijaz]

I am also looking for an update on this issue and wondering if this is something that is still being worked on.

[asheemmamoowala]

@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.

[jasongoodwin]

This is 100% possible with the expression syntax.

                {
                'type': 'Feature',
                'geometry': {
                    'type': 'Point',
                    'coordinates': [this.long, this.lat]
                },
                'properties': {
                    'icon': 'bus-generic'
                }}

If you have a property, you can query it and use it in the layer definition to display different icons:

   map.addLayer({
       'id': 'bus-layer',
       'type': 'symbol',
       'source': 'bus-source', // reference the data source
       'layout': {
           'icon-image': ['get', 'icon'], // reference the icon in properties
           'icon-size': 0.2,
       }
   });
   ```

See this example over here!
https://docs.mapbox.com/mapbox-gl-js/example/add-image-missing-generated/