ES:Overpass turbo/MapCSS

From OpenStreetMap Wiki
Jump to: navigation, search
Idiomas disponibles — Overpass turbo/MapCSS
Afrikaans Alemannisch aragonés asturianu azərbaycanca Bahasa Indonesia Bahasa Melayu Bân-lâm-gú Basa Jawa Baso Minangkabau bosanski brezhoneg català čeština dansk Deutsch eesti English español Esperanto estremeñu euskara français Frysk Gaeilge Gàidhlig galego Hausa hrvatski Igbo interlingua Interlingue isiXhosa isiZulu íslenska italiano Kiswahili Kreyòl ayisyen kréyòl gwadloupéyen kurdî latviešu Lëtzebuergesch lietuvių magyar Malagasy Malti Nederlands Nedersaksies norsk norsk nynorsk occitan Oromoo oʻzbekcha/ўзбекча Plattdüütsch polski português română shqip slovenčina slovenščina Soomaaliga suomi svenska Tiếng Việt Türkçe Vahcuengh vèneto Wolof Yorùbá Zazaki српски / srpski беларуская български қазақша македонски монгол русский тоҷикӣ українська Ελληνικά Հայերեն ქართული नेपाली मराठी हिन्दी অসমীয়া বাংলা ਪੰਜਾਬੀ ગુજરાતી ଓଡ଼ିଆ தமிழ் తెలుగు ಕನ್ನಡ മലയാളം සිංහල ไทย မြန်မာဘာသာ ລາວ ភាសាខ្មែរ ⵜⴰⵎⴰⵣⵉⵖⵜ አማርኛ 한국어 日本語 中文(简体)‎ 吴语 粵語 中文(繁體)‎ ייִדיש עברית اردو العربية پښتو سنڌي فارسی ދިވެހިބަސް
Overpass API logo.svg
API de Overpass · Referencia de lenguaje · Guía de lenguaje · Términos técnicos · Áreas · Ejemplos de consultas · Ejemplos avanzados · Edición dispersa · ID permanente · Preguntas frecuentes · más (español) · Sitio web
Estado de servidores · Versiones · Desarrollo · Diseño técnico · Instalación · Capa de compatibilidad XAPI · Esquemas de transporte público · Aplicaciones · Código fuente e incidencias
Overpass turbo · Asistente · Atajos de teclado de Overpass turbo · Hojas de estilo MapCSS · Exportar a GeoJSON · más (español) · Desarrollo · Código fuente e incidencias · Sitio web

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. MapCSS is also supported by other applications, such as JOSM, see MapCSS.

A more general introduction is also found on this diary entry.

How to Use

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

... your overpass query here ...
  ... your mapcss stylesheet here ...

Click the try it yourself in overpass-turbo below for interactive examples.


Markers with Text try it yourself in overpass-turbo

Overpass-turbo MapCSS marker text.png

You can 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:

  node, way, relation {
    text: name;

Line Styles try it yourself in overpass-turbo

{ color:black; width:4; opacity:1; }

{ opacity:0.3; }

{ width:12; }


{ color:brown; width:3; dashes:1,10,1,10; }

{ color:black; width:1; dashes:5,5; }

Color Coding try it yourself in overpass-turbo

node, area
{ color:white; fill-color:white; }

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

{ color:grey; fill-color:grey; }

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


Icons for POIs try it yourself in overpass-turbo

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

To use icons for ways and relations, see #Some_Restrictions


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


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.

Objects can be filtered by their tags as well as by their meta attributes (which are distinguished from regular tags by having a @ sign prefix, for example way[@id=171784106] can be used to style a specific osm object).

  1. deprecated, use child-selectors instead


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.
  • To apply symbols and icons to ways and relations, they have to be output as single nodes by using out center; See Overpass_API/Overpass_QL#Print (out)

Icon Sets

Overpass turbo is bundled with three map icon sets: maki (v0.5), "osm mapnik" and osmic. You can use them by referring to icons/maki/***.png, icons/mapnik/***.png or icons/osmic/***.png, respectively. See this example. 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 {
/* line features */
line {
/* polygon features */
area {
/* style modifications */
/* objects in relations */
relation node, relation way, relation relation {
/* tainted objects */
way:tainted, relation:tainted {
/* placeholder points */
way:placeholder, relation:placeholder {
/* highlighted features */
node:active, way:active, relation:active {