The main way to achieve this is to use data driven styles. If the color is a property of each feature you can use a simple get
expression. For example, if your property was called myColor
you could set the stroke color property of the line layer to ['get', 'myColor']
and it would apply the value of that property for each line when rendering that line. Here is a code sample:
var data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"myColor": "#00ff4c"
},
"geometry": {
"coordinates": [[-115.53846,43.50652],[-109.62032,38.38176]
],
"type": "LineString"
},
"id": 0
},
{
"type": "Feature",
"properties": {
"myColor": "#0000ff"
},
"geometry": {
"coordinates": [[-92.73803,44.49236],[-99.65292,40.87626]
],
"type": "LineString"
},
"id": 1
},
{
"type": "Feature",
"properties": {
"myColor": "#ff0000"
},
"geometry": {
"coordinates": [[-104.76121,46.07021],[-106.19402,43.28018]
],
"type": "LineString"
},
"id": 2
}
]
};
//Create a data source an add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add the data to the datasource.
datasource.add(data);
//Add a line layer.
map.layers.add(
new atlas.layer.LineLayer(datasource, null, {
//Use data drive style for color.
strokeColor: ['get', 'myColor'],
strokeWidth: 3
})
);
If you have some metric or category value stored as a property, you could use that with a match
, case
, or interpolation
expression.
Note that the color can be any CSS color string (hex string, CSS color name, rgb/rgba string).