Overpass turbo/MapCSS

From OpenStreetMap Wiki
Jump to: navigation, search
Available languages
English

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

Markers with Text

Overpass-turbo MapCSS marker text.png

You can now finally use MapCSS to display text markers on the map. This is very useful to show the names of displayed features. The following MapCSS statement adds text markers to each node, way or relation on the map and displays whatever is in the tag name:

{{style:
  node, way relation {
    text: name;
  }
}}

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, it is 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;
}