Mapbox-gl-js: Symbol "icon-color" is not working

[trecord]

I'm trying to change the color of a geoJSON marker by using "icon-color". It does have an image supplied, as the style reference indicates it requires, but the icon remains the default color. text-color is working correctly as expected.

JS fiddle example: https://jsfiddle.net/x6dr7sek/4/

[lucaswoj]

The docs for icon-color state

This can only be used with sdf icons

Unfortunately we don't have a turnkey solution for generating sdf icons but you can see an example of how its done in the maki project https://github.com/mapbox/maki/blob/mb-pages/sdf-render.js

Closing as a duplicate of https://github.com/mapbox/mapbox-gl-js/issues/1594

[trecord]

Are there any examples of how to change a style's sprite sheet, in that case? The documentation doesn't make it clear how to modify the sprites sheet of a style hosted on mapbox.

[lucaswoj]

I just spoke with the Studio team about this. We do not currently support sdf icons on Mapbox-hosted styles. Your best option is to generate separate icons for all the different colors you want.

[redspider]

Just ran into this. High level of developer frustration here that there are no simple icons (or even a marker) that can trivially coloured. Can't easily adapt to circle even since I need text labels, necessitating multiple layers etc.

[reustle]

+1 to @redspider 's comment

Regarding the comment by @lucaswoj above ( https://github.com/mapbox/mapbox-gl-js/issues/1817#issuecomment-163012240 ) does anyone have a working link to an example? That link is now dead.

I just want a simple marker that isn't grey...

[atmikev]

Same here. Just migrated from Mapbox.js to Mapbox GL JS and I'm really surprised this isn't supported functionality.

[benderlidze]

any example?

[lbud]

I did a little bit of work on a tiny-sdf (a library to generate glyph SDFs from fonts) branch here: https://github.com/mapbox/tiny-sdf/compare/image-sdf

It's experimental and is not yet ready for a release, but if you need to generate SDF icons in the meantime you can try checking out that branch and using the CLI tool added there (usage here). You can then add the generated SDF image to your spritesheet at runtime with map.addImage as of the next release (v0.40.0).

[agrignard]

Same here I am pretty surprised not to have a simple way to edit the color of my icon. Any update on this?

[peterqliu]

@agrignard there are no plans to do this, but I suggest making your icon a font to make them recolorable and resizable

[agrignard]

Thank you for the answer, what do you mean by "I suggest making your icon a font". In my specific project, I have basically a lot of point (coming from a json) and I like to have a different color according to a specific attribute parsed (automatically) from my geojson.

[ryanhamley]

@agrignard It sounds like you may have more luck with expressions

[agrignard]

I had also a look at this exemple which work great to display circle. However I'd like also to add a text on top of the circle (that was of the reason that I choose the symbol first)

When I write this I cannot see the text, is it allowed to use layout and paint at the same time. I guess I am doing something wrong here but I cannot figure out what. Should I use two different layer? One for the circle and one for the text?
"layout": { "text-field": ["test"], "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], }, "paint": { 'circle-radius': 5, 'circle-color': [ 'match', ['get', 'status'], 'type1', '#0000ff', /* other */ '#ccc' ] }

[reustle]

I've done something similar with a circle layer and circle-color, and it worked well for me. I previously used the method of creating html elements that attached to the map and styling them, but that was too slow.

    map.addLayer({
        'id': 'stations-layer',
        'type': 'circle',
        'source': 'stations',
        'paint': {
            'circle-color': {
                property: 'bike_count',
                type: 'interval',
                stops: [
                    [0, '#e24f4f'],
                    [1, '#e4ad46'],
                    [3, '#49ab47']
                ]
            },
            'circle-radius': {
                property: 'bike_count',
                type: 'interval',
                stops: [
                    [0, 5],
                    [1, 5.5],
                    [3, 6]
                ]
            },
            'circle-stroke-width': 4,
            'circle-stroke-opacity': 0.05
        },
    })

full source: https://tokyobikeshare.com/static/map.js

[agrignard]

@reustle you don't assign text to your circle in your example? Just a custom radius and a custom color? I am wondering how to add a text on top of a circle (a kind of label) without creating 2 different layer

[nyurik]

There is an ugly workaround to make SDF automagically work without actually converting the maki icons : just add "sdf": true to all objects in the sprite json file. Afterwards the coloring will just work.