In this case, there are multiple types filtered from the same layer. I want to assign each type a unique color.
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,
},
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,
},
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,
},
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!
@makella can you update to version 1.0.0? https://observablehq.com/d/c2a626a37f791866 has some examples of doing zoom and feature dependent styling for PolygonSymbolizer and LineSymbolizer. From now on, the convention will always be the
(zoom,feature)
parameters: you'll need to see the tags of Feature viafeature.props
(shortened fromproperties
to save typing ?? :) )There's also
feature.geomType
which you may need for some styling if your vector tiles layer have heterogeneous geometry. In the protomaps vector tiles it's always homogenous, but other vendors mix up multiple kinds in one layer