Support icon-color for non-SDF icons

[ivelander]

We have a use case that requires the ability to use icons for data-driven shapes as well as data-driven coloring of those icons. Currently we can get half of this functionality from the circle layer type and half from the symbol layer type. We have a hacked solution that merges the basic features of both on a fork of mapbox-gl-js (along with a style-spec and shader fork)...

https://github.com/ivelander/mapbox-gl-js

It would be great to be able to get off this fork, something we could do if support was added for icon-color for non-SDF icons.

[ivelander]

Here is an example of the result I am after, this uses the fork linked in the first comment to use a sprite sheet texture and a property based color.

[lucaswoj]

This would be great to support on fill-pattern and line-pattern too 😄

[rhagigi]

Just in case this helps anyone -- I solved this issue on my map by using a custom icon font (I used http://fontastic.me but FontAwesome or anything else will work just the same). Just upload the font to mapbox studio and use the text-font, text-color, text-size, etc styling options for the geoJson layer and just use no icon. You can do some pretty awesome stuff with that and it has the added benefit of making it much easier to set up an icon baseline size and scale it up or down (vs my previously uploaded SVGs to mapbox studio which all ended up slightly different sizes).

[aidanlister]

@rhagigi any chance you can post a full example / screenshot?

[rhagigi]

Sure thing, I'll put something together when I get home.

[rhagigi]

The way I'm achieving it is fairly simple. As I mentioned before, simply create a font using fontastic or another font generation service/build-tool, or use an existing icon font like fontawesome or material-icons. Then:

1. Upload that font on the Mapbox Studio Font Page.
   a) I think I had to also use the font on some layer in the map to get it to come down with the map and be usable. Could be a fake layer or just a layer you're not even really using in your style, like maybe "airport labels" or something obscure. Make a note of what the font is called there, you'll need it later
   see example screenshot

2. Add a GeoJSON source to the map as usual

 map.addSource('MySourceId', {
        type: 'geojson',
        data: geoJson
      });

3. Add a symbol layer to the map to show that source, using our font and a bunch of layout/styling tricks to get it working to your tastes:

map.addLayer({
        id: 'MyLayerId',
        type: 'symbol',
        source: 'MySourceId',
        layout: {
          'text-line-height': 1, // this is to avoid any padding around the "icon"
          'text-padding': 0,
          'text-anchor': 'bottom', // change if needed, "bottom" is good for marker style icons like in my screenshot,
          'text-allow-overlap': true, // assuming you want this, you probably do
          'text-field': iconString, // IMPORTANT SEE BELOW: -- this should be the unicode character you're trying to render as a string -- NOT the character code but the actual character,
          'icon-optional': true, // since we're not using an icon, only text.
          'text-font': ['FontAwesome Regular'], // see step 1 -- whatever the icon font name,
          'text-size': 18 // or whatever you want -- dont know if this can be data driven...
        },
        paint: {
          'text-translate-anchor': 'viewport', // up to you to change this -- see the docs
          'text-color': '#00FF00' // whatever you want -- can even be data driven using a `{featureProperty}`,
        }
      });

For more layout/paint properties you can use (like pitch/rotation styling, etc) and more info, visit the Mapbox Style spec page for symbol layers

4. In order to set the text field, you need to actually have a string value of the icon you want. If you already know the character code for the one you need, you can just hardcode it and use String.fromCharCode to get a string value from that character code from the font css. For example, fa-calendar is "\f073".

But, that can be hard when you don't know what the character will be in the font and you want to use the "classname" version for this, like fa-calendar or fa-plane or whatever. This makes you more resilient in case you upgrade font versions, as the underlying character-code mapping may change. Make sure you load the font in your CSS as well for this technique -- I use fontawesome on my site anyway so it wasn't extraneous.

This is kinda-font-awesome specific, as they load the character using CSS into the :before content based on the classname (fa-calendar example), but you can use a similar technique for most icon fonts. I wrapped my function in lodash memoize as once you call this once for a classname, you should never need to call it again.

const getFontAwesomeStringFromClassname = _memoize((className) => {
  const element = document.createElement('i');
  element.className = 'fa ' + className; // font-awesome specific where `className`==="fa-calendar"
  element.style.display = 'none'; //  or not
  document.body.appendChild(element);
  const contentValue = window.getComputedStyle(
    element, ':before'
  ).getPropertyValue('content');
  document.body.removeChild(element);
  return contentValue;
});

You can then pass that returned contentValue into text-field or -- if you want, use it in your GeoJSON source to use different icons for different features, and use the {someFeatureProperty} syntax to grab the textField from each feature property. I suggest a similar approach for the text-color property if you want to drive it based on data.

Unfortunately, I'm not sure if mapbox-gl supports data-driven styling yet for font-size (they might now), so I just used multiple layers with filters on them to do dynamic sizing (e.g.: one layer size 40 and one layer size 20, with filters for the feature type).

Hopefully that wasn't too much craziness and I didn't skip anything important. Let me know if you have any questions about all that.

[aidanlister]

That's great Royi, thanks!

[ivelander]

We are using a similar strategy as well. I'd be curious if anyone (perhaps the mapbox folks) have any input on potential performance or stability concerns with this strategy. I know there is a lot of logic in the text placement logic to manage collisions, positioning in relation to the icon, etc. Our apps can result in a lot of data on the map, so performance quickly becomes a concern with everything we are doing (part of the appeal of mapbox-gl in the first place).

[aidanlister]

We've solved this a different way!

We've used circles and icons as separate layers ... see this:

    icon_layer = {
        "id": "images",
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "{icon}-15",
            "icon-allow-overlap": True,
            "icon-ignore-placement": True,
            "icon-size": {
                "base": 1,
                "type": "exponential",
                "stops": [
                    [10, 0],
                    [12, 0.8],
                    [15, 0.8],
                    [18, 1]
                ]
            },

        }
    }
    circle_layer = {
        "id": "markers",
        "type": "circle",
        "source": "markers",
        "paint": {
            'circle-radius': {
                'property': 'task-priority',
                'type': 'categorical',
                'stops': [[1, 5], [5, 5], [10, 10]],
            },
            'circle-color': {
                'property': 'task-status',
                'type': 'categorical',
                'stops': list(qs.model.STATUS_CHOICES_COLOURS.items()),
            },
            'circle-stroke-width': 1,
            'circle-stroke-color': '#fff',
            'circle-stroke-opacity': 1,
        }
    }
    layers = [circle_layer, icon_layer]

This is what it looks like (if you want the icons inside the circles, change base size to 0.7):

[davidascher]

@rhagigi Thanks for the detailed description. I'm almost there.

I'm finding that even though I have added FontAwesome (or Material Icons) as a font to my Mapbox style, and even though some version of that font gets downloaded by the mapbox component, no markers show up.

If i use a font that I know exists like Arial Unicode MS Bold then I see their (ugly ;) letters.

I believe the font isn't being properly downloaded, based on the network traffic:

56 bytes seems a bit short. The file is a PBF file that contains:

"
�FontAwesome Regular��65280-65535

Any suggestion how to debug this?

One hint might be that the font name isn't actually being displayed:

(it'd be lovely if mapbox just published these two very common and openly licensed fonts)