A place to collect handy tips and tricks for style-based filters

Simple color by type

In this case, there are multiple types filtered from the same layer. I want to assign each type a unique color.

Try 1: fail

If/else conditions with a fallback. (following this example)

  {
    dataLayer: `admin`,
    symbolizer: new LineSymbolizer({
      color: (p:any) => {
        if (p.admin_level === 0){
          return "hsl(0,100%,50%)"
        } else {
          if (p.admin_level === 1) return "hsl(80,80%,80%)"
          return "hsl(242,100%,50%)"
        }
      },
      width: 2,
      opacity: 0.4,
    }),
    filter: (f) => 
      f.admin_level === 0 ||
      f.admin_level === 1,
  },

Try 2: fail

Maybe try a condition with a fallback. Like this

{
  dataLayer: `admin`,
  symbolizer: new LineSymbolizer({
    color: (p:any) => {
      if (p.admin_level === 0) return "hsl(0,100%,50%)"
      return "hsl(80,80%,80%)"
    },
    width: 2,
    opacity: 0.4,
  }),
  filter: (f) => 
    f.admin_level === 0 ||
    f.admin_level === 1,
},

Try 3: fail

Maybe I have to use a color varaible instead of hsl.

{
   dataLayer: `admin`,
   symbolizer: new LineSymbolizer({
     color: (p:any) => {
       if (p.admin_level === 0) return params.boundaries0
       return params.boundaries1
     },
     width: 2,
     opacity: 0.4,
   }),
   filter: (f) => 
     f.admin_level === 0 ||
     f.admin_level === 1,
 },

Try 4: fail

Should it be:

• color: (p) =>
• color: (p:any) => { if (p["admin_level"] == 0 { ...
• does it matter if it is == or ===?

Tried a few other variations of the same idea. Really not sure what I'm doing wrong!