CODEWITHSUNDEEP
mapbox-gl-js
Kevin Edmundson
Kevin Edmundson

Reputation: 11

dynamic icon/symbol coloring with mapbox

I am working with mapbox gl js for the first time. I need to be able to define a 'template' icon/symbol (lets say a triangle that is approx 16X16) and then use that icon/symbol on a layer but be able to use the icon-color property in the 'paint' section to be able to set the color for the icon/symbol in the style.

I have created a triangle svg file. I then used a cli utility to convert that svg to an sdf (I named it triangle16_sdf.png) and uploaded it to my aws public bucket. The sdf is monochromatic. I am trying to use that in a style as defined int the below style snippet:

{"type":"symbol","icons":{"triangle-16":"https://my_aws_url/icons/triangle16_sdf.png"},"paint":{"icon-color":"#00ff00"},"layout":{"symbol-placement":"point","icon-image":"triangle-16","icon-ignore-placement":true,"icon-allow-overlap":true}}

This shows the icon but only the template. It does not color the icon with the appropriate color.

Is there something I am doing incorrectly here or is there another approach where I can have a single icon/symbol that I can color differently with a style?

Upvotes: 1

Views: 1777

Answers (1)

Scarysize
Scarysize

Reputation: 4281

I'm not sure you can use the style to tell mapbox-gl that an icon should be considered an "sdf" icon. But with the addImage method you are able to do this:

const image = new Image();

image.onload = () => {
  map.addImage('icon-name', image, {sdf: true});
};

image.src = 'your-image-url';

Upvotes: 2

Related Questions