Overpass color sets differently

Question

I was working on this problem where I have to create several sets of different regions, give these sets all different colors and show this on a map. I've done this several years back by hand, in Photoshop, but when I had to do it again this year I was planning on automating it.

So, an example would be that the set of areas {"Rotterdam", "Vlaardingen"} will be coloured red; whereas the set of regions {"Den Haag", "Delft"} will be coloured blue.

I was planning on using the Overpass API for this. However, while I'm able to create one set of regions and color these, I cannot get multiple sets with different colors working. I would like to know if this even is possible, and if so, how I would do that. It seems like it should be possible, as it also is possible to have different colors for other selectors.

Coloring of one set:

(
rel[name="Rotterdam"];
rel[name="Vlaardingen"];
)->.myArea1;

rel.myArea1[admin_level=10][type=boundary][boundary=administrative];
out geom;

{{style:
  relation
    { color:red; fill-color:red; }
}}

Now, the docs of Overpass state that you can use classes as selectors. However, I have tried multiple ways to create classes, but the different sets either show up in the same colour, or in the default colour. I've included some of my attempts below.

(Note; The solutions below do not work)

Tried solution 1:

(
rel[name="Rotterdam"];
rel[name="Vlaardingen"];
)->.myArea1;
(
rel[name="Delft"];
rel[name="Den Haag"];
)->.myArea2;

rel.myArea1[admin_level=10][type=boundary][boundary=administrative];
rel.myArea2[admin_level=10][type=boundary][boundary=administrative];
out geom;

{{style:
  relation.myArea1
    { color:red; fill-color:red; }

  relation.myArea2
    { color:blue; fill-color:blue; }
}}

Tried solution 2:

(
rel[name="Rotterdam"];
rel[name="Vlaardingen"];
)->.myArea1;
{{{set .myArea1;}}

(
rel[name="Delft"];
rel[name="Den Haag"];
)->.myArea2;
{{{set .myArea2;}}

rel.myArea1[admin_level=10][type=boundary][boundary=administrative];
rel.myArea2[admin_level=10][type=boundary][boundary=administrative];
out geom;

{{style:
  relation.myArea1
    { color:red; fill-color:red; }

  relation.myArea2
    { color:blue; fill-color:blue; }
}}

Tried Solution 3:

(
rel[name="Rotterdam"];
rel[name="Vlaardingen"];
)->.myArea1;
{{{set .myArea1;}}
(
rel[name="Delft"];
rel[name="Den Haag"];
)->.myArea2;
{{{set .myArea1;}}

(rel.myArea1[admin_level=10][type=boundary][boundary=administrative]; rel.myArea2[admin_level=10][type=boundary][boundary=administrative];) -> .comb;
.comb out geom;

{{style:
  relation.myArea1
    { color:red; fill-color:red; }
  relation.myArea2
    { color:blue; fill-color:blue; }
}}

Tried solution 4:

(
rel[name="Rotterdam"];
rel[name="Vlaardingen"];
)->.myArea1;

(
rel[name="Delft"];
rel[name="Den Haag"];
)->.myArea2;

rel.myArea1[admin_level=10][type=boundary][boundary=administrative];
{{style:
  relation
    { color:red; fill-color:red; }
}}
out geom;
rel.myArea2[admin_level=10][type=boundary][boundary=administrative];
out geom;

{{style:
  relation
    { color:blue; fill-color:blue; }
}}

If anyone could help me out here, that would be highly appreciated.

Kind Regards,

Toby

Answer 1

You cannot reuse the inputset assignment ")->.myArea1;" in the MapCSS section, as this part of the query is being executed by Overpass API (=the database backend), while MapCSS is executed solely in your browser (=frontend code).

As Overpass API doesn't return any indication as to which inputset a certain relation originates from, you cannot use the inputset name "myArea1" in a MapCSS expression.

Effectively, this means that every syntax variation you've tried is basically unsupported by the very way this query gets executed in the backend and rendered in your browser.

Unless you find some other way to group those relations by some other common tag, I'm afraid you would have to explicitly use the name=* tag for each relation.

rel[type=boundary]
   [boundary=administrative]
   [admin_level=10]
   [name~"^(Rotterdam|Vlaardingen|Delft|Den Haag)$"];
out geom;

{{style:

  relation[name=Rotterdam]
    { color:blue; fill-color:red; }

  relation[name=Vlaardingen]
    { color:red; fill-color:red; }

  relation[name=Delft]
    { color:red; fill-color:blue; }

  relation[name=Den Haag]
    { color:red; fill-color:blue; }

}}

Try it in overpass turbo: https://overpass-turbo.eu/s/Hkh