Saltar al contenido principal

Estilo del mapa

Un archivo de estilo MapCSS contiene reglas que se aplican a cada objeto de arriba abajo.

Por ejemplo, este estilo:

node[natural=tree] {
icon-image: "tree.svg";
}

muestra la imagen tree.svg en los puntos cuya etiqueta natural tenga el valor tree.

Cada regla tiene dos partes: el filtro node[natural=tree] y los parámetros de dibujo icon-image: tree.svg;. El filtro determina a qué objetos se aplican los parámetros.

Las reglas se pueden anidar y definir parámetros en cada nivel.

|z16- {
icon-scale: 0.50;
icon-tint: @color_icon_tint;

[amenity=bicycle_parking] {
icon-image: "bike_parking.svg";
}
[amenity=bicycle_rental] {
icon-image: "bike_rental.svg";
}
[amenity=bicycle_repair_station] {
icon-image: "bike_service.svg";
}
}

Las reglas anidadas mantienen el estilo conciso y ordenado: los parámetros comunes se definen una sola vez y no se repiten en varios bloques.

Esta documentación describe el dialecto de MapCSS utilizado por Guru Maps. Algunos parámetros del lenguaje original no están implementados, pero se admiten macros de preprocesamiento, reglas anidadas y nuevas funciones para operaciones calculadas. El estilo de Guru Maps está disponible en su repositorio.

Filtros​

Veamos un filtro complejo:

node,area|z14-[boundary=forest_compartment][ref]

Se compone de:

  1. Filtro de tipo node,area: utiliza node para puntos, line para líneas y area para polígonos. Separa varios tipos con comas o utiliza * si el tipo no importa. canvas selecciona el fondo del mapa.
  2. Filtro de zoom z14-: indica los niveles en los que se aplica la regla. Puedes definir solo el mínimo, como z8-, solo el máximo, como z-9, un único nivel, como z12, o un intervalo como z3-9. Los dos extremos del intervalo están incluidos: z3-9 se aplica desde el nivel 3 hasta el 9.
  3. Filtros de etiquetas [boundary=forest_compartment][ref]: seleccionan objetos cuya etiqueta boundary vale forest_compartment y que contienen cualquier valor en ref. Para seleccionar objetos sin la etiqueta ref, utiliza [!ref].

Cada parte es opcional. Un filtro de zoom puede usarse solo, como hace |z16- en el ejemplo anterior.

Filtros de etiquetas​

FiltroSelecciona los objetos en los que
[ref]la etiqueta ref existe
[!ref]falta la etiqueta ref
[highway=primary]el valor es igual a primary
[highway!=primary]el valor no es primary
[population>100000]el valor es mayor; <, >= y <= funcionan igual
[ele%100]el valor es múltiplo de 100
[ref^=E]el valor empieza por E
[name$=Street]el valor termina en Street
[name*=Park]el valor contiene Park
[cuisine~=pizza]pizza es uno de los valores separados por ;, como en pizza;burger

Las comparaciones >, <, >= y <= comparan números cuando ambos valores son números y, en caso contrario, texto.

Escribe el valor entre comillas dobles si contiene un apóstrofo, unas comillas o ], o si empieza o termina con un espacio:

[name="McDonald's"],
[ref^="B "] {
icon-image: "logo.svg";
}

Un valor entre comillas no puede contener {, }, ;, @ ni //.

Agrupar filtros​

Se pueden separar varios filtros mediante comas:

node,area|z14-[boundary=forest_compartment][ref],
node,area|z14-[boundary=forestry_compartment][ref]

En este ejemplo, los parámetros comunes se pueden mover a un nivel superior:

node,area|z14-[ref] {
[boundary=forest_compartment],
[boundary=forestry_compartment] {

}
}

Para reunir varias reglas en un grupo, encierra los filtros entre paréntesis ( y ) sin abrir todavía un bloque de reglas:

node,area|z14-[ref](
[boundary=forest_compartment],
[boundary=forestry_compartment]) {
}

Un filtro de zoom puede aplicarse a todo un grupo:

|z11-([highway=trunk], [highway=primary]) {
shield-image: "shield.svg";
}

Filtros de relaciones​

relation[...] selecciona los objetos que pertenecen a una relación con las etiquetas indicadas. Por ejemplo, los tramos de las rutas de senderismo:

relation[type=route][route=hiking] {
line|z9- {
color: #0000ff80;
width: 2pt;
}
}

La función relationTag lee las etiquetas de esa relación, y per-relation dibuja un tramo una vez por cada una de sus relaciones.

Macros de preprocesamiento​

El preprocesador prepara el estilo para su análisis: sustituye valores y activa o desactiva bloques según los ajustes.

Macros de sustitución​

@import​

Inserta el contenido del archivo indicado:

@import "polygons.mapcss";

@{name}​

Inserta el valor de una macro donde se utilice:

// Define el color
@color_ground: #EAE3D3;

// Después utilízalo así
canvas
{
fill-color: @color_ground;
}

Una macro inserta su texto tal cual, así que puede contener parte de una expresión:

@route_band_width: zlinear(13, 5pt, 7pt, 9pt, 11pt);

line|z13- {
outline-width: eval(@route_band_width);
}

Una macro cuyo valor empieza por eval( se calcula una sola vez, al cargar el estilo.

Condiciones​

@if​

Comprueba un parámetro e incluye o excluye un bloque del estilo:

@if Theme == Dark
@import "colors_dark.mapcss";
@else // Colores predeterminados
@import "colors.mapcss";
@endif

Una condición puede comparar un parámetro con ==, !=, <, >, <= o >=. Un valor es una sola palabra formada por letras, dígitos y _. Un parámetro sin comparación comprueba que esté activado; ! comprueba que esté desactivado:

@if Food
// se muestra cuando el interruptor Restaurantes y cafeterías está activado
@endif
@if !Food
// se muestra cuando está desactivado
@endif

Guru Maps utiliza estos parámetros de preprocesamiento:

  • Theme {Light, Dark}: tema actual de la aplicación. En el tema oscuro, el blanco puro #FFFFFF de los iconos se vuelve gris oscuro; usa #FEFEFE para el blanco que debe seguir siendo blanco.
  • Style {City, Outdoor}: estilo de mapa actual;
  • SubStyle {Hike, Bike, Ski, Car}:
    • Hike, Bike y Ski se establecen en las variantes Outdoor del mapa para senderismo, bicicleta y esquí;
    • Car se establece durante la navegación en coche, con cualquier estilo de mapa.
  • Interruptores de Objetos del mapa en los ajustes: AllShops, Bar, Beauty, BuildingName, CityService, Culture, Education, Entertaiment, Financial, Food, Hotel, Medical, PistesAndLifts, Postal, PublicTransport, Railway, Shop, Sport. Un interruptor vale 1 cuando está activado y 0 cuando está desactivado. Durante la navegación en coche, todos los interruptores excepto BuildingName están desactivados.

@else​

Define el bloque que se ejecuta cuando la primera condición es falsa.

@elif​

Contiene una condición que se evalúa si las anteriores no se han cumplido.

@endif​

Cierra el bloque de la condición actual.

Comentarios​

// comenta el resto de la línea; /* y */ delimitan un comentario de varias líneas.

Parámetros de dibujo​

Estos parámetros controlan cómo se dibujan los objetos en el mapa.

Valores de los parámetros​

Anchura​

El grosor de una línea, width, puede expresarse en píxeles 1px, puntos 2pt, metros 3m o mediante una expresión como eval( zlinear( 13, 1px,1pt,max(2pt, 4m)) );. Consulta la sección Expresiones. Escribe siempre la unidad: un número sin unidad se mide en unidades internas del mapa.

Color​

Utiliza #RGB, #RRGGBB, #RRGGBBAA o un nombre de la lista de colores CSS.

fill-color, casing-color, dashes-color, text-color y font-stroke-color solo admiten un color. color, icon-tint, outline-color, shield-color y shield-text-color admiten también una expresión.

Texto y comillas​

Las comillas simples y las dobles significan lo mismo. No hay secuencias de escape, así que un texto no puede contener la comilla con la que se encierra: escribe "McDonald's" con comillas dobles y 'say "hi"' con comillas simples. Los ejemplos de esta página usan comillas dobles.

Dentro de eval(), pon entre comillas todos los textos. El nombre de un tag formado solo por letras latinas y dígitos funciona sin ellas, así que tag(name) equivale a tag("name"), pero un nombre con : o _ necesita comillas: tag("addr:street"). Los números con unidades, como 2pt, y los colores, como #808080, van sin comillas. En este ejemplo, la paleta es un texto, relationTag("colour") lee un tag y #808080 es un color:

color: eval(mapColor("red #E53935, green #43A047, blue #1E88E5", relationTag("colour"), #808080));

Fuera de eval(), las comillas son opcionales: el valor de un parámetro es el texto hasta ;, así que icon-image: tree.svg; e icon-image: "tree.svg"; son equivalentes. Los espacios al principio y al final de un valor se descartan, incluso entre comillas. @import funciona igual.

En los filtros de tags, pon entre comillas un valor que contenga un apóstrofo, una comilla o ], o que empiece o termine con un espacio: [name="McDonald's"], [ref^="B "]. Los nombres de tags en los filtros y los valores en las condiciones @if nunca llevan comillas.

Ni siquiera entre comillas un valor puede contener ;, { ni }, que terminan el parámetro o abren un bloque, ni //, que inicia un comentario, ni @, que inicia una macro.

Próximamente

La próxima versión de Guru Maps elimina estos límites. Una barra invertida escapará una comilla (\", \', \\), ;, {, }, // y @ serán caracteres normales dentro de las comillas, y un valor entre comillas conservará sus espacios.

Números e interruptores​

text-priority, icon-scale, icon-offset-x, icon-offset-y y z-index admiten un número simple, no una expresión. Los interruptores como text-allow-overlap admiten true o false.

Orden de dibujo​

layer​

El número de capa separa los distintos niveles del mapa.

// Para cualquier objeto con la etiqueta 'layer', asigna a la propiedad 'layer' el valor de esa etiqueta
*|z9-[layer] {
layer: eval(tag("layer"));
}

z-index​

z-index establece el orden de dibujo de los objetos del mismo tipo dentro de una capa.

area|z10-[natural=wood] {
z-index: -3;
fill-color: @color_wood;
}

area[natural=oceanwater] {
z-index: -2;
fill-color: @color_water;
}

Parámetros de polígonos​

fill-color​

Color de relleno del polígono.

area|z5-[natural=water] {
fill-color: @color_water;
}

fill-image​

Imagen de relleno del polígono.

// Imagen de relleno de una zona militar, dibujada sobre los demás objetos
area|z11- {
[landuse=military],
[military=danger_area] {
z-index: 2;
fill-image:"forbiddenArea.png";
}
}

fill-image admite estilos incrustados con datos base64.

// Equivale a arrow.svg
fill-image: eval(data("PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI2IDNoMTBWMWw1IDMtNSAzVjVIMjZ6IiBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii40Ii8+PC9zdmc+Cg=="));

color y width para polígonos​

Color y anchura del borde.

area|z15-[building] {
z-index: 3;
width: 1px;
color: @color_landuse_residential_stroke;
}

Parámetros de líneas​

color y width para líneas​

Color y anchura de la línea.

line|z13-[natural=tree_row] {
width: 3pt;
color: @color_wood;
z-index: -10;
}

casing-color y casing-width​

Color y anchura del contorno de una línea, utilizados principalmente para carreteras. El contorno se añade a cada lado de la línea, por lo que también necesita width.

line|z8-[highway=motorway],
line|z11-[highway=motorway_link] {
color: @color_motorway;
casing-color: @color_motorway_casing;
casing-width: 0.5pt;
}

dashes​

Longitudes de los segmentos pintados y vacíos, alternados. Utiliza hasta 8 números cuya suma sea menor que 64. Cada número es la longitud de un segmento de línea en puntos.

line|z15-[highway=cycleway] {
dashes: 2,2,2,2;
dashes-color: @color_cycleway_dashes;
}

dashes-color y dashes-width​

Color y anchura de los trazos usados para senderos, caminos, escaleras y límites. Los trazos solo se dibujan cuando dashes, dashes-color y dashes-width están definidos.

line|z15-[highway=steps] {
dashes-color: @color_footway_dashes;
dashes-width: eval( zlinear( 16, 3pt, 4pt ) );
}

linecap​

Forma de los extremos de la línea. Valores posibles: none, square, round.

linejoin​

Forma de las uniones. Valores posibles: round, bevel.

outline-color y outline-width​

Una segunda línea dibujada a lo largo de una línea o del borde de un polígono, por ejemplo una banda translúcida bajo una ruta. A diferencia del contorno (casing), esta línea no depende de width: outline-width es su anchura total.

Un contorno translúcido marca una ruta de senderismo con una banda ancha, y el sendero sigue viéndose a través de ella:

relation[type=route][route=hiking] {
line|z13- {
outline-width: 7pt;
outline-color: #1E88E570; // azul translúcido
}
}

offset​

Desplaza la línea hacia un lado: los valores positivos, a la izquierda del sentido del tramo; los negativos, a la derecha. El desplazamiento se aplica a la línea, a su contorno (casing), a su outline y a sus trazos. Se usa sobre todo con per-relation, para dibujar varias rutas de un mismo tramo una al lado de otra; consulta el ejemplo más abajo.

per-relation​

per-relation: true dibuja un tramo una vez por cada relación a la que pertenece, con los parámetros de esa relación. Junto con offset y la función relationSlot, dibuja una al lado de otra las rutas que comparten un tramo:

relation[type=route][route=subway] {
line|z11- {
per-relation: true;
width: 2pt;
offset: eval(relationSlot() * 2pt);
color: eval(mapColor("red #E53935, green #43A047, blue #1E88E5", relationTag("colour"), #808080));
}
}

Parámetros de texto​

text​

Texto que se dibuja junto a un punto o centrado sobre una línea o un polígono.

node,area|z2-8[place=country] {
text: eval(locTag("name"));
// Se omiten los demás parámetros
}

font-weight​

Peso de la fuente. Valores posibles: lighter, light, normal, medium, semibold, bold, bolder.

node,area|z9-[place=town],
node,area|z10-[place=village],
node,area|z12-[place=hamlet] {
font-weight:light;
font-size:11;
font-stroke-width:2px;
font-stroke-color: @color_label_stroke;
}

font-style​

normal o italic. Para texto en negrita, utiliza font-weight.

Los mapas suelen escribir los nombres de las aguas en cursiva, lo que los distingue de los nombres de lugares:

line|z15-[waterway=river] {
text: eval(locTag("name"));
font-style: italic;
text-color: #0F4F80;
}

font-size​

Tamaño de la fuente en puntos. El tamaño puede cambiar con el zoom; escribe números simples en zlinear y el texto crecerá suavemente:

node|z10-[place=city] {
font-size: eval(zlinear(10, 13, 14, 15));
}

font-stroke-width y font-stroke-color​

Anchura y color del contorno de la fuente. La anchura puede ser una expresión.

text-color​

Color del texto.

node,area|z2-8[place=country] {
text: eval(locTag("name"));
text-color: @color_name_text;
text-priority: 10;
// Se omiten las demás etiquetas
}

text-letter-spacing​

Espacio adicional entre letras, en fracciones del tamaño de la fuente: 0.1 añade una décima del tamaño de la fuente. Puede cambiar con el zoom mediante zlinear.

Las mayúsculas espaciadas distinguen los nombres de las regiones de los nombres de las ciudades. A medida que se acerca el zoom, las letras se separan y el nombre ocupa más espacio de su región:

node|z6-[place=state] {
text: eval(uppercase(locTag("name")));
text-letter-spacing: eval(zlinear(6, 0.1, 0.18, 0.25));
}

text-priority​

Cuando varias etiquetas compiten por el mismo espacio, determina cuál se muestra primero.

text-allow-overlap​

Permite que las etiquetas se superpongan.

text-big-padding​

Reserva el doble de espacio alrededor del texto. Úsalo para núcleos importantes —ciudades, pueblos, barrios, etc.— y evita que las etiquetas oculten el mapa.

Parámetros de iconos​

icon-image​

Nombre de la imagen que se muestra en un punto o en el centro de un polígono.

node,area|z17-[amenity=library] {
icon-image: "library.svg";
icon-scale: 0.37;
icon-tint: @color_icon_tint;
}

icon-image admite estilos incrustados con datos base64.

// Equivale a poi_circle_small.svg
icon-image: eval(data("PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOCA4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNyA0QzcgNS42NTY4NSA1LjY1Njg1IDcgNCA3QzIuMzQzMTUgNyAxIDUuNjU2ODUgMSA0QzEgMi4zNDMxNSAyLjM0MzE1IDEgNCAxQzUuNjU2ODUgMSA3IDIuMzQzMTUgNyA0WiIgZmlsbD0iIzgwODA4MCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggNEM4IDYuMjA5MTQgNi4yMDkxNCA4IDQgOEMxLjc5MDg2IDggMCA2LjIwOTE0IDAgNEMwIDEuNzkwODYgMS43OTA4NiAwIDQgMEM2LjIwOTE0IDAgOCAxLjc5MDg2IDggNFpNNCA3QzUuNjU2ODUgNyA3IDUuNjU2ODUgNyA0QzcgMi4zNDMxNSA1LjY1Njg1IDEgNCAxQzIuMzQzMTUgMSAxIDIuMzQzMTUgMSA0QzEgNS42NTY4NSAyLjM0MzE1IDcgNCA3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="));

icon-fallback​

Una imagen más pequeña que se muestra en lugar de icon-image cuando el icono no tiene espacio en el mapa, por ejemplo un punto en lugar del logotipo de una tienda. En una calle concurrida, el lugar permanece en el mapa y su logotipo aparece al acercar el zoom:

node|z16-[brand:wikidata=Q38076] {
icon-image: "logo_mcdonalds.svg";
icon-fallback: "poi_circle_small.svg";
}

icon-scale​

Cambia la escala de la imagen para mostrarla más grande o más pequeña que su tamaño original.

icon-tint​

icon-tint vuelve a colorear una imagen. #FFF permanece blanco; #CCC se convierte en una versión clara del color elegido; #888 coincide con ese color; #444 adopta una versión más oscura; y #000 permanece negro. Los colores se mezclan suavemente entre esos puntos.

icon-offset-x y icon-offset-y​

Desplazan la imagen respecto a su punto de anclaje. De forma predeterminada, queda centrada sobre el punto del mapa. Por ejemplo, icon-offset-y: 0; alinea la parte inferior de un icono de alfiler con el punto de destino. Los valores van de 0 a 1: 0 representa el borde inferior o izquierdo y 1, el superior o derecho.

image-allow-overlap​

Permite que los iconos se superpongan.

Parámetros de escudos de carretera​

Un escudo muestra el número de una carretera sobre una placa a lo largo de la vía. Se dibuja en líneas cuando están definidos shield-image y shield-text.

Los escudos con los colores de las señales de carretera de un país permiten distinguir de un vistazo las carreteras principales de las locales. En Bielorrusia, por ejemplo, los números de las carreteras principales van en blanco sobre rojo, y los de las locales, en oscuro sobre blanco:

line|z11-[highway=primary][ref] {
shield-image: "shield.svg";
shield-text: eval(listItem(tag("ref"), 0)); // el primer número de "М1;E30"
shield-color: #005387;
[ref^=М], [ref^=Р] {
shield-color: #C1121C;
}
[ref^=Н] {
shield-image: "shield_plate.svg";
shield-color: #FEFEFE;
}
}

shield-image​

La imagen de la placa.

shield-text​

El texto de la placa, normalmente el número de la carretera.

shield-color​

Tiñe la imagen de la placa igual que icon-tint.

shield-text-color​

Color del texto. Si no se define, el texto es oscuro sobre placas claras y blanco sobre placas oscuras.

shield-fit​

Cómo se ajusta la placa al texto. stretch (valor predeterminado) estira la parte central de la imagen hasta la anchura del texto y conserva sus extremos. fixed conserva la imagen tal como está dibujada y solo la ensancha cuando el texto no cabe; úsalo para placas con una forma propia, como las señales de carreteras de EE. UU. Para conservar los colores originales de la imagen, define shield-color: #00000000.

Las rutas de California se numeran en un círculo para dos cifras y en una elipse para tres. El número sigue al prefijo de la red, como en CA 1:

line|z12-[highway=secondary][ref^="CA "] {
shield-fit: fixed;
shield-text: eval(listItem(listItem(tag("ref"), 0), 1, " "));
shield-image: eval(cond(length(listItem(listItem(tag("ref"), 0), 1, " ")) == 3,
"shield_state_3.svg", "shield_state_2.svg"));
shield-color: #00000000;
shield-text-color: #1E1E1E;
}

Parámetros de detalles​

Utiliza details-text y details-description para definir el nombre y la descripción de los objetos GeoJSON. details-text aparece como título y details-description, como descripción. Si ambos están vacíos, se ignoran los toques sobre el objeto. Estos parámetros admiten expresiones.

* {
details-text: eval(tag("name"));
details-description: eval(tag("description"));
}

details-enabled: false hace que los toques sobre un objeto no hagan nada: Guru Maps no abre sus detalles. Una relación con este parámetro, como una ruta, tampoco aparece entre las rutas de un tramo tocado. Úsalo para objetos que no tienen nada que contar:

node|z15-[amenity=hunting_stand] {
icon-image: "poi_hunting_stand.svg";
details-enabled: false;
}

Expresiones​

Los filtros y parámetros de dibujo pueden depender de factores externos, calcularse mediante fórmulas o variar según el nivel de zoom.

Los valores calculados siempre deben comenzar con eval().

Funciones​

Dentro se pueden utilizar estas funciones:

min y max​

Devuelven el valor mínimo o máximo de sus parámetros. No hay límite en el número de parámetros.

any​

Devuelve el primer valor que no sea null. Admite cualquier número de argumentos.

data​

Decodifica una cadena base64. Se puede utilizar en icon-image y fill-image.

tag​

Devuelve el valor de la etiqueta indicada o null si no existe.

locTag​

Devuelve el valor localizado de una etiqueta según los idiomas preferidos del usuario. Por ejemplo, si la lista contiene inglés, ruso y el idioma local, locTag("name") comprueba name:en, después name:ru y por último name, y utiliza la primera coincidencia. Guru Maps admite ar, be, cs, da, de, en, es, fr, it, ja, ko, nl, pl, pt, ru, sv, uk y zh. Utiliza locTag() para esos idiomas y llama explícitamente a tag() para los demás.

relationTag​

Devuelve el valor de una etiqueta de la relación a la que pertenece el objeto, como el color de una ruta: relationTag("colour"). Con per-relation, lee la relación que se está dibujando.

relationSlot​

Con per-relation, devuelve la posición de la relación entre las rutas dibujadas en el tramo, centrada en 0: -0.5 y 0.5 para dos rutas, -1, 0 y 1 para tres. Multiplícala por la anchura de la línea para colocar las rutas una al lado de otra con offset, como en el ejemplo de per-relation.

listItem​

Devuelve un elemento de una lista, contando desde 0. Los elementos se separan con ; o con el carácter indicado en el tercer parámetro.

shield-text: eval(listItem(tag("ref"), 0)); // "E 50" para "E 50;E 65"
color: eval(listItem(tag("osmc:symbol"), 0, ":")); // "red" para "red:white:red_bar"

length​

Devuelve el número de caracteres del texto, por ejemplo para elegir una placa más ancha para un número de carretera de tres cifras, como en el ejemplo de shield-fit.

uppercase, lowercase y capitalize​

Cambia las mayúsculas y minúsculas del texto. El segundo parámetro, opcional, es un idioma cuyas reglas se aplican, como en uppercase(locTag("name"), "el").

mapColor​

Elige un color de una paleta. El primer parámetro es la paleta, "name color, name color, ..."; el segundo es el valor que se busca; el tercero, opcional, es el resultado cuando el valor está vacío. Un nombre de color de la paleta devuelve su color; cualquier otro color devuelve el color más cercano de la paleta.

color: eval(mapColor("red #E53935, green #43A047, blue #1E88E5", relationTag("colour"), #808080));

formatElevation​

Da formato a una altura en metros como 1234 m o en pies, según las unidades elegidas en la aplicación. Una cima se etiqueta con su nombre y su altura, o solo con la altura cuando no tiene nombre:

node|z13-[natural=peak] {
text: eval(cond(locTag("name"),
cond(tag("ele"), locTag("name") . " " . formatElevation(tag("ele")), locTag("name")),
formatElevation(tag("ele"))));
}

cond​

Evalúa una expresión lógica. Si el primer argumento es verdadero, devuelve el segundo; de lo contrario, devuelve el tercero.

// Comprueba addr:housenumber
text: eval( cond( tag("addr:housenumber"),
// Si existe addr:housenumber, concatena la condición siguiente
tag("addr:housenumber") . cond( any( locTag("name"), tag("addr:housename") ),
// Si existe name o addr:housename, añádelo entre paréntesis
" (" . any( locTag("name"), tag("addr:housename") ) . ")",
// En caso contrario, utiliza una cadena vacía
""),
// Si no hay housenumber, utiliza name o addr:housename
any( locTag("name"), tag("addr:housename") ) ) );

boolean​

Convierte el valor en booleano. Si falta o equivale a 0, No, Off o False, sin distinguir mayúsculas, devuelve false; en cualquier otro caso devuelve true.

zlinear​

Cambia el valor suavemente según el zoom. El primer parámetro es el nivel inicial y a continuación se indican los valores de cada nivel posterior.

line|z13-[highway=residential] {
width: eval( zlinear( 13, 1px, 1pt, max(2pt, 4m) ) );
color: @color_small_road;
linecap: round;
}

En el ejemplo, la carretera mide 1 píxel en el nivel 13, 1 punto en el 14 y, desde el nivel 15, el mayor valor entre 2 puntos y 4 metros.

metric​

Convierte el parámetro numérico a metros.

line|z12-[highway=tertiary] {
width: eval( zlinear( 12, 1px, 1pt, 1pt, max(3pt, metric(any(tag("lanes"),2)*2)) ));
}

Aquí, el número de carriles se multiplica por 2 para obtener una distancia en metros. max(3pt, metric()) devuelve la mayor de las dos anchuras.

Operadores de expresiones​

Las expresiones admiten los operadores matemáticos +, -, *, /, el operador . para concatenar cadenas, el operador de igualdad == y ~=, que comprueba que el texto contiene una subcadena.