Mapbox GL style line color based on property text value

Question

I'm trying to style a single GeoJSON source with different line colors based on a feature property using react-map-gl, and I can't find a way to get set the color of lines in a smart way.

Most of all, I would love to apply a function on the dataset to return the color of my own choosing based on a feature property value, but so far I haven't fount anything about it. If you know about it, please point in my direction:)

If I have the following GeoJSON:

{
  "type": "FeatureCollection",
  "name": "lineData",
  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
  "features": [
    { "type": "Feature", "properties": { "Need": "Urgent" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 10.653823175868171, 59.676506860589157 ], [ 10.652881996887283, 59.675443989456632 ] ] ] } },
    { "type": "Feature", "properties": { "Need": "Starting" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 10.658536710768077, 59.680279341285896 ], [ 10.65787427600862, 59.680222775937636 ] ] ] } },
    { "type": "Feature", "properties": { "Need": "Medium" }, "geometry": { "type": "MultiLineString", "coordinates": [ [ [ 10.653224904719789, 59.67859470385492 ], [ 10.653201052045171, 59.678557551379008 ] ] ] } },
  ]
}

I would like to be able to style this source data with different line colors based on the property "Need". Say, urgent becomes red, medium becomes yellow, and starting becomes green.

I've read about styling expressions at mapbox, and I believe the "feature-state" is key to solving this, but I cant wrap my head around how to get the color converted from a feature.

If this in the rendering:

<Source id="my-data" type="geojson" data={TheDataFileWithSomeData}>
  <Layer {...layerStyleTheLines } />
</Source>

Then I want a layer styling something like this (not working):

const layerStyleTheLines = {
  id: 'style_it_to_red',
  type: 'line',
  paint: {
    'line-color': [
      [["==", ["feature-state", "Need"], "Urgent"],"red"],
      [["==", ["feature-state", "Need"], "Medium"],"yellow"],
      [["==", ["feature-state", "Need"], "Starting"],"green"]
    ],
    'line-width': 3,
  }
};

Thanks for all your help!

Answer 1

I've read about styling expressions at mapbox, and I believe the "feature-state" is key to solving this, but I cant wrap my head around how to get the color converted from a feature.

You only want feature-state if you're intending to manipulate the feature attributes dynamically, which I don't think you are.

You probably just want regular data-driven styling:

const layerStyleTheLines = {
  id: 'style_it_to_red',
  type: 'line',
  paint: {
    'line-color': [
      'match', ['get','Need'],
      'Urgent', 'red',
      'Medium', 'yellow',
      'Starting','green',
      'black'
    ],
    'line-width': 3,
  }
};