Overpass turbo/MapCSS

From OpenStreetMap Wiki
Jump to: navigation, search

overpass turbo supports MapCSS for styling map-features. Below is a introduction on how to use MapCSS in turbo, some examples and the list of supported MapCSS-features.

A more general introduction is also found on my blog.

How to Use

MapCSS can be attached to a query with a special "mustache"-tag: You write {{style: and everything that comes afterwards until the first }} is interpreted as a MapCSS stylesheet.

<osm-script>
  ... your overpass query here ...
</osm-script>
{{style:
  ... your mapcss stylesheet here ...
}}

Examples

Line Styles try it yourself in overpass-turbo

Turbo-mapcss-ex1.png
way
{ color:black; width:4; opacity:1; }
 
way[tunnel][tunnel!=no]
{ opacity:0.3; }
 
way[highway=motorway]
{ width:12; }
 
... 
 
way[highway=track][tracktype=grade5]
{ color:brown; width:3; dashes:1,10,1,10; }
 
way[highway=path]
{ color:black; width:1; dashes:5,5; }

Color Coding try it yourself in overpass-turbo

Turbo-mapcss-ex2.png
node, area
{ color:white; fill-color:white; }
 
node[amenity=drinking_water],
node[amenity=fountain],
area[amenity=fountain]
{ color:blue; fill-color:blue; }
 
node[amenity=place_of_worship],
area[amenity=place_of_worship]
{ color:grey; fill-color:grey; }
 
node[amenity=restaurant],
area[amenity=restaurant]
{ color:red; fill-color:red; }
 
...

Icons for POIs try it yourself in overpass-turbo

Turbo-mapcss-ex3.png
node[amenity=cafe] {
  icon-image: url('icons/maki/cafe-18.png');
  icon-width: 18;
}

MapCSS

The MapCSS implementation follows the specifiactions of the MapCSS/0.2 draft.

Selectors

Features can be selected by their OSM-type (node/way/relation) and/or by their geometry (node/line/area).

The following pseudo-classes are available:

  • :active - selects the map-feature that has just been clicked on (and is showing the popup)
  • :tainted - selects features which have incomplete geometries (e.g. ways with some missing nodes or incomplete multipolygons)
  • :mp_outline - selects ways which belong to a multipolygon[1]
  • :tagged - selects features which have interesting tags (any tag other than created_by=* or source=*)
  • :untagged - selects features which have no interesting tags (opposite of :tagged)
  • :placeholder - selects points which are a placeholder for a line or area.

Classes work as specified via the "set .my_class" syntax.

  1. deprecated, use child-selectors instead

Properties

The following properties can be used to style map-features:

Line Properties

  • color - color of the line
  • opacity - opacity of the line
  • width - the width of the line
  • dashes - specifies dashed lines: an array of alternating on/off lengths (e.g. 5,8)

Area Properties

  • fill-color - the color of the area filling
  • fill-opacity - the opacity of the area filling
  • casing-* - (note that casing for lines is not yet supported and that casing properties for areas can also be set via the respective unprefixed line properties)

Point Properties

  • symbol-shape - specifies the symbol which should be drawn at the location of the POI. Currently only "circle" is supported.
  • symbol-size - the size of the symbol to draw (e.g. the radius of the circle)
  • symbol-* - sets properties of the symbol to display: symbol-stroke-width, symbol-stroke-color, symbol-stroke-opacity, symbol-fill-color, symbol-fill-opacity (note that the symbol properties can also be set via the respective unprefixed line properties)
  • icon-image - if set, an icon will be rendered for the POI. (note that icon_width and icon_height must be supplied if one wants the icon to be centered around the point)
  • icon-width - the width of the icon
  • icon-height - the height of the icon

Some Restrictions

  • Layering (neither via ::layername subparts nor z-index sublayers) is not supported. Only the "default" layer (subpart) is processed. Other layers as well as z-index are ignored.
  • Descendant "child" selectors work only for relations as parents. I.e. "relation node" will work, but "way node" won't.
  • Eval support is currently somewhat experimental. Expect some glitches (e.g. the build-in function prop() isn't implemented yet). Simple usage (like eval('tag("population")/100000');) should be fine, though.
  • the set syntax doesn't support eval-statements yet.
  • zoom-level selectors (e.g. |z12) are not supported (in fact, they are always evaluated for zoom-level 18, regardless of the actual map state).
  • the wild-card type selector "*" is not yet implemented.

Icon Sets

turbo is bundled with two map icon sets: maki and "osm mapnik". You can use them by referring to icons/maki/***.png or icons/mapnik/***.png, respectively. Alternatively, its also possible to use icons from external urls.

More Examples

overpass turbo - Default Style

This is the default MapCSS stylesheet of map features in overpass turbo:

/* point features */
node {
  color:#03f;
  width:2;
  opacity:0.7;
  fill-color:#fc0;
  fill-opacity:0.3;
}
/* line features */
line {
  color:#03f;
  width:5;
  opacity:0.6;
}
/* polygon features */
area {
  color:#03f;
  width:2;
  opacity:0.7;
  fill-color:#fc0;
  fill-opacity:0.3;
}
/* style modifications */
/* objects in relations */
relation node, relation way, relation relation {
  color:#d0f;
}
/* tainted objects */
way:tainted, relation:tainted {
  dashes:5,8;
}
/* placeholder points */
way:placeholder, relation:placeholder {
  fill-color:red;
}
/* highlighted features */
node:active, way:active, relation:active {
  color:#f50;
  fill-color:#f50;
}