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.
  2. Filtro de zoom z14-: indica los niveles en los que se aplica la regla. Puedes definir solo el mínimo, como z8-, o un intervalo como z3-9. En ese caso se aplicará desde el nivel 3 hasta el 8, ambos incluidos.
  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].

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 sin abrir todavía un bloque de reglas:

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

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;
}

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

Guru Maps utiliza estos parámetros de preprocesamiento:

  • Theme {Light, Dark}: tema actual de la aplicación;
  • Style {Default, Outdoor}: estilo de mapa actual;
  • SubStyle {Car, Hike, Bike}:
    • Car para conducir;
    • Hike para senderismo;
    • Bike para bicicleta.

@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.

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.

Color​

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

Texto​

Cualquier secuencia entre comillas simples o dobles se considera texto.

'string'
"another string"

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.

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. La suma debe ser una potencia de 2 —4, 8, 16, 32, 64, etc.— y cada número representa la longitud 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.

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, miter, bevel, auto.

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: bolder, bold, normal, light, lighter.

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-size​

Tamaño de la fuente.

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

Anchura y color del contorno de la fuente.

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-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.

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-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 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'));
}

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().

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 be, cs, da, de, en, es, fr, it, ja, ko, nl, pl, ru, sv, uk y zh. Utiliza locTag() para esos idiomas y llama explícitamente a tag() para los demás.

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 y los operadores de comparación <, >, == y ~= para buscar subcadenas.