MapCSS/0.2/Proposal layer selector

From OpenStreetMap Wiki
< MapCSS‎ | 0.2
Jump to navigation Jump to search

Proposal

Often it is necessary to apply several styles to a single map feature, e.g. because it is a road with tramway tracks and maybe it even is a district border. Or you want to show left/right bicycle infrastructure. Another idea would be more complex styles for a single feature, consisting of several symbolizers (e.g. road with access=private).

Layer identifier

The idea is to create additional "layers" or "pseudo elements" with a special selector part, the "layer identifier", e.g. ::layer:

way[highway]::road {
  width: 8;
  color: #ffffff;
  casing-width: 2;
  casing-color: #a0a0a0;
}
way[railway=tram]::tram {
  width: 2;
  color: #303030;
  z-index: 1;
}

If you omit the layer identifier, this is the same as using ::default.

object-z-index

If you want to render several "layers" with the same z-index, you may use the property object-z-index (default: 0). Layers with higher object-z-index will be rendered after layers with smaller object-z-index.

Eval function prop()

The eval function prop() should be extended by an additional parameter "layer identifier" (default: "default").

Function Description
prop(key:string, layer:string) returns value of a property, described by key on layer "layer". In the case there's no such property, returns none. If no parameter layer is passed, the value in the current layer (as selected by layer identifier in the selector) will be used.

Naming

  • JOSM named this selector part "layer identifier", something I'm not totally happy with, because it's actually not a special layer, but just a duplicate of the object with different properties. That's why I called this method "pseudo element" in pgmapcss, but this might be confusing too. If you have a better name, please come forward and post it here.

Current/Planned support in libraries

Function JOSM pgm
Layer identifier: ::layer + +
Property: object-z-index + +
Eval function: prop(key:string, layer:string) + +


Examples

Layer-identifier-road-tram.png
way[highway][highway!=footway][highway!=cycleway][highway!=service][highway!=platform]::road {
  width: 8;
  color: #ffffff;
  casing-width: 2;
  casing-color: #a0a0a0;
}
way[railway=tram]::tram {
  width: 2;
  color: #303030;
  z-index: 1;
}
Layer-identifier-dashes-rail.png
way[railway=rail] {
  color: #a0a0a0;
  width: 2;
}
way[railway=rail][usage=main] {
  color: #707070;
  z-index: 1;
}
way[railway=rail]::dashes {
  color: eval(prop("color", "default"));
  width: 6;
  dashes: 2,8;
}

Comments