Reputation: 3721
Is there a way to change a mapbox-gl-js icon-image color?
This code taken from https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/ won't change the marker color to red
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-15",
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
},
"paint": {
"text-size": 12,
"icon-color" : "#ff0000"
}
});
I've tried all the options listed in the official documentation
Upvotes: 20
Views: 26120
Reputation: 1
if you want to change icon color of png you just have to add this additional input sdf: true
while adding an image.
And also set paint property addlayer
"paint": {
"icon-color": "#00ff00",
"icon-halo-color": "#fff",
"icon-halo-width": 2
}
this.map.addImage("Id", iconUrl, { sdf: true });
Upvotes: 0
Reputation: 7175
I found a answer. You need sdf icons specifically for it to work.
https://github.com/mapbox/mapbox-gl-js/issues/1594
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
Updated by @yurik: The above link no longer works, probably refers to https://github.com/mapbox/maki/blob/b0060646e28507037e71edf049a17fab470a0080/sdf-render.js
https://github.com/mapbox/mapbox-gl-js/issues/161
Upvotes: 8
Reputation: 159
The Problem is MapBox only allows you to color icons which are in the SDF (signed distance function) format.
icon-color The color of the icon. This can only be used with sdf icons.
Here is a small documentation about it. Like the GitHub post says it's limited for only one color. Getting a sdf file out of a png file is pretty easy in MapBox.
The documentation of the addImage function tells you that you can add an optional options paramater which can contain sdf and pixelRatio.
So all you have to do is something like this:
map.loadImage(imageURL, function(error0, image0) {
if (error0) throw error0;
map.addImage("image", image0, {
"sdf": "true"
});
map.addLayer({
"id": "Layer1",
"type": "symbol",
"source": "places",
"layout": {
"icon-image": "image",
"icon-allow-overlap": true,
},
"paint": {
"icon-color": "#00ff00",
"icon-halo-color": "#fff",
"icon-halo-width": 2
}
});
});
Upvotes: 12
Reputation: 1034
You could also use your own pre-colored external icons (or generate colored ones on the fly) as icon-image
if you use map.loadImage()
and map.addImage()
first.
Examples:
Add a generated icon to the map
Upvotes: 3