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 brackets look fine; the issue with LineSymbolizer is that I haven't used the LineSymbolizer in that way with dynamic properties yet, but the code ought to work exactly like you tried in parts 1,2, and 3 :) It needs to be implemented, and will work on that tomorrow.
the
:any
is only important if you're inside a TypeScript project. Are you editing the style in a .ts file? There may be some benefits to the cartographer to see type-checking errors, to catch common mistakes like switching the order ofzoom
andproperties
in a function definition, for example. (Are you working on the command line or inside an IDE?)The difference between
==
and===
is subtle, see https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons but I'd say in most protomaps.js contexts where you are comparing it to a constant like "leisure" or the number 5 you can just use==
.