Is it possible to style a texture?

[IagoLast]

Hi, I´m trying to create colored custom svg markers.

For non-technical issues my markers are gray and I cannot change them.

I want to give the markers a color but it seems that tangram.js is performing a color adition gray + newColor instead replacing the original color with the new one.

I´ve created a simple demo to test with the tangram play web app

textures:
    pois:
        url: https://s3.amazonaws.com/com.cartodb.users-assets.production/maki-icons/marker-24.svg
sources:
    mapzen:
        type: TopoJSON #GeoJSON, MVT, TopoJSON
        url:  https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson

styles:
    icons:
        base: points
        texture: pois
        draw:
            color: magenta

scene:
    background:
        color: global.earth1

layers:
    pois:
        data: { source: mapzen, layer: pois }
        draw:
            icons:
                size: 80px

See the result here, note the markers are supposed to be magenta.

Regards.

[meetar]

You're correct, in Photoshop blend mode terms the "color" is applied in the icons shader as a "multiply" whereas you're trying to do something like a "screen" or "overlay".

We don't currently support these other modes but they are in development now. Here's an example, but note that you should not expect this to be supported going forward:

https://mapzen.com/tangram/play/?scene=https%3A%2F%2Fmapzen.com%2Fapi%2Fscenes%2F5%2F842%2Fresources%2Fblank.yaml#8.5833/41.7956/-8.8135

[nvkelso]

Another way to skin the cat:

• https://github.com/tangrams/refill-style/blob/gh-pages/refill-style.yaml#L1237-L1245

styles:
    colorized-icons:
        mix: icons
        shaders:
            uniforms:
                u_tint: global.black_color
                u_fill: global.white_color
            blocks:
                filter: |
                    color.rgb = mix(u_tint.rgb, u_fill.rgb, color.rgb);

Where:

global:
    black_color: [0.000,0.337,0.878]
    white_color: [1.00,1.00,1.00]

See also:

• https://github.com/tangrams/refill-style/blob/gh-pages/themes/color-blue.yaml