mapbox-gl-draw data driven style on LineString

Question

I use Mapbox GL Draw and I want to customize the fill color of my LineString Feature using data driven. I have a set userProperties: true and I have a property prefixed with user_ .

here is my style configuration :

 {
    id: "gl-draw-linestring-fill-inactive",
    type: "fill",
    filter: ["all", ["==", "active", "false"], ["==", "$type", "LineString"],["!=", "mode", "static"],],
    paint: {
      "fill-color": [
        "case",
        ["==", ["get", "user_type"], "meetingRoom"],
        "#00ff00",
        ["==", ["get", "user_type"], "notUsed"],
        "#00ff00",
        "#ff0000",
      ],
      "fill-outline-color": "#3bb2d0",
      "fill-opacity": 0.4,
    },
  }

and my feature :

{
      "type": "Feature",
      "id": "ROOM-floor-1-1",
      "properties": {
        "parentId": "floor-1",

        "user_type": "notUsed"
      },
      "geometry": {
        "coordinates": [
          [2.334699793548168, 48.85506145052912],
          [2.3334337908935083, 48.85340956808176],
          [2.3360301692199243, 48.85314130852265],
          [2.3368884761040363, 48.85547088304844],
          [2.3368884761040363, 48.85547088304844],
          [2.334699793548168, 48.85506145052912]
        ],
        "type": "LineString"
      }
    }

Feature is always paint with default value (#ff0000). It should be #00ff00 in this example. In the same application I use the same property (user_type) to set Line color on Polygon and it works fine !

Any Idea ?

score 3 · Answer 1 · edited Jan 15 '22 at 13:33

I just figured out how to do it, I'm putting the answer here in case other people make the same mistake as me.

I misunderstood the mapbox documentation for using my own properties in data driven styles.

If you want to use a property named myProp from your feature, you have to prefix it with user_ but only in the style rule.

For example:

{
      "type": "Feature",
      "id": "1",
      "properties": {
        "myProp": "myValue"
      },
      "geometry": {
        "coordinates": [...],
        "type": "LineString"
      }
    }

And:

{
    id: 'my-rule',
    type: 'line',
    filter: ['all', ['==', 'active', 'false'], ['==', '$type', 'LineString'],['!=', 'mode', 'static']],
    paint: {
      'line-color': [
         'match', ['get', 'user_myProp'], // get the property
           'myValue', '#00ff00',
           '#ff0000']
    },
  }

My mistake was to add prefix user_ in the style rule AND the feature properties.

Robin Uphoff · Answer 2 · 2022-01-11T10:11:00.723

1

I dont really understand, why you are using "type: fill" in your style configuration for a linestring. You shoud be using the line-specific style properties as shown in this mapbox example https://docs.mapbox.com/mapbox-gl-js/example/data-driven-lines/

Also, since you are refering to a property in your data driven styling, there is no need to use the "case". you can simply use "match"

So it would rather be:

{
    id: 'gl-draw-linestring-fill-inactive',
    type: 'line',
    filter: ['all', ['==', 'active', 'false'], ['==', '$type', 'LineString'],['!=', 'mode', 'static']],
    paint: {
      'line-color': [
         'match', ['get', 'user_type'], // get the property
           'meetingRoom', '#00ff00',
           'notUsed', '#00ff00',
           '#ff0000'],
      'line-width': 3,
    },
  }

By the way: ids on feature level should be integers or strings, that can be cast in as integers: https://github.com/mapbox/mapbox-gl-js/issues/7632

edited Jan 11 '22 at 10:11

answered Jan 05 '22 at 14:42

Robin Uphoff

625
1
9
19

I use the custom mode DrawBezierCurve to get plain feature with curved segment. This mode create closed LineString Features with a fill color. I want to customize it. – Hepatus Jan 06 '22 at 08:38
btw I tried to customize line-color with match operator. it doesn't work anymore. the default value is always used – Hepatus Jan 06 '22 at 08:41
I used the above configuration and it works fine. I have nice green lines in the middle of Paris! – Robin Uphoff Jan 06 '22 at 09:35

mapbox-gl-draw data driven style on LineString

2 Answers2