CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-js
james
james

Reputation: 570

mapbox data driven style. setting color for values not in object

currently i'm setting the paintproperty like so

this.map.setPaintProperty('da-highlighted', 'fill-color', 
                  // get the id property and use it as a key into "values"
                  ["get", ["to-string", ["get", "DAUID"]], ["literal", coloredDas]]);

So this works fine for the tiles who's id is in the coloredDas object. But it sets the color of the ones that aren't found to black. Is there anyway I can set the default color for values not in the object? I'd like it to be transparent. Not sure of the syntax or if it's even possible. I can't find anything online about this case.

I've tried the following based on an answer

this.map.setPaintProperty('da-highlighted', 'fill-color', 
                  // get the id property and use it as a key into "values"
                    [
                    'case',
                    ['has', ["to-string", ['has', "DAUID"],["literal", coloredDas]], ["get", ["to-string", ["get", "DAUID"]], ["literal", coloredDas]],
                    'blue'
                    ]]  


              );

but recieve the following error: 

Error: layers.da-highlighted.paint.fill-color: Expected at least 3 arguments, but found only 1.

I later formatted the query to this:

                    [
                    'case',
                    ['has', ["to-string", ['has', "DAUID"],["literal", coloredDas]]], [["get", ["to-string", ["get", "DAUID"]], ["literal", coloredDas]]],
                    'blue'
                    ]

however the error I got then is 

Error: layers.da-highlighted.paint.fill-color[1][1]: Expected arguments of type (value), but found (boolean, object) instead.

Upvotes: 1

Views: 3237

Answers (1)

Scarysize
Scarysize

Reputation: 4291

You can try using a case or match expression. Combine it with your current get and provide a default value. Something like this:

[
  'case',
  [
    'has',
    ['to-string', ['get', 'DAUID']],
    [
      'literal',
      colors
    ]
  ],
  [
    'get',
    ['to-string', ['get', 'DAUID']],
    [
      'literal',
      colors
    ]
  ],
  'white'
];

Check out the documentation here: https://www.mapbox.com/mapbox-gl-js/style-spec#expressions-case

Here is a jsfiddle demonstrating the expression for circle-color paint property: https://jsfiddle.net/Scarysize/xwbxx3wq/14/

Upvotes: 3

Related Questions