Pular para o conteúdo principal

Estilo do mapa

Um arquivo MapCSS contém regras aplicadas a cada objeto de cima para baixo.

Por exemplo:

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

Essa regra mostra a imagem tree.svg nos pontos em que a etiqueta natural tem o valor tree.

Cada regra tem duas partes: o filtro node[natural=tree] e os parâmetros de desenho icon-image: tree.svg;. O filtro define a quais objetos os parâmetros serão aplicados.

As regras podem ser aninhadas e definir parâmetros em cada nível:

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

Assim, parâmetros compartilhados são definidos uma vez, sem repetição em vários blocos.

Esta documentação descreve o dialeto MapCSS usado pelo Guru Maps. Alguns parâmetros da linguagem original não foram implementados, mas há macros de pré-processamento, regras aninhadas e novas funções de cálculo. O estilo do Guru Maps está disponível no repositório.

Filtros​

Considere este filtro:

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

Ele contém:

  1. Filtro de tipo node,area: use node para pontos, line para linhas e area para polígonos. Separe tipos por vírgulas ou use * quando o tipo não importar.
  2. Filtro de zoom z14-: define os níveis em que a regra é aplicada. Use somente um mínimo, como z8-, ou um intervalo, como z3-9. O intervalo inclui os níveis 3 a 8.
  3. Filtros de etiquetas [boundary=forest_compartment][ref]: mantêm objetos cuja etiqueta boundary seja forest_compartment e que tenham qualquer valor em ref. Para objetos sem ref, use [!ref].

Vários filtros podem ser separados por vírgulas:

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

Os parâmetros compartilhados podem ser movidos para um nível superior:

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

    }
}

Para agrupar filtros sem iniciar imediatamente um bloco, use parênteses:

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

Macros de pré-processamento​

O pré-processador substitui valores e ativa ou desativa blocos de acordo com as configurações antes que o estilo seja analisado.

Macros de substituição​

@import​

Insere o conteúdo do arquivo indicado:

@import "polygons.mapcss";

@\{name\}​

Insere o valor de uma macro:

// Define a cor
@color_ground: #EAE3D3;

// Usa a cor
canvas
{
    fill-color: @color_ground;
}

Condições​

@if​

Testa um parâmetro e inclui ou exclui um bloco:

@if Theme == Dark
    @import "colors_dark.mapcss";
@else // Cores padrão
    @import "colors.mapcss";
@endif

O Guru Maps oferece estes parâmetros:

  • Theme {Light, Dark} — tema atual;
  • Style {Default, Outdoor} — estilo atual do mapa;
  • SubStyle {Car, Hike, Bike}:
    • Car para carro;
    • Hike para caminhada;
    • Bike para bicicleta.

@else​

Define o bloco usado quando a primeira condição é falsa.

@elif​

Define outra condição caso as anteriores não correspondam.

@endif​

Encerra o bloco condicional.

Parâmetros de desenho​

Estes parâmetros controlam como os objetos são desenhados.

Valores dos parâmetros​

Largura​

A espessura de uma linha, ou width, pode ser indicada em pixels (1px), pontos (2pt), metros (3m) ou calculada, por exemplo, com eval( zlinear( 13, 1px,1pt,max(2pt, 4m)) );. Veja Expressões.

Cor​

Use #RGB, #RRGGBB, #RRGGBBAA ou um nome da lista de cores CSS.

Texto​

Qualquer sequência entre aspas simples ou duplas é texto:

'string'
"another string"

Ordem de desenho​

layer​

O número da camada separa as diferentes camadas de renderização do mapa:

// Define a propriedade layer com o valor da etiqueta homônima
*|z9-[layer] {
    layer: eval(tag(layer));
}

z-index​

Define a ordem de desenho de objetos do mesmo tipo em uma camada:

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​

Cor de preenchimento:

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

fill-image​

Imagem de preenchimento:

// Preenche uma área militar acima dos outros objetos
area|z11- {
    [landuse=military],
    [military=danger_area] {
        z-index: 2;
        fill-image:"forbiddenArea.png";
    }
}

fill-image aceita imagens inline em base64:

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

color e width para polígonos​

Cor e largura da borda:

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

Parâmetros de linhas​

color e width para linhas​

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

casing-color e casing-width​

Definem a cor e a largura do contorno, usados principalmente em vias:

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

dashes​

Define o comprimento dos segmentos desenhados e vazios. A soma deve ser uma potência de 2 (4, 8, 16, 32, 64 etc.). Cada número é medido em pontos.

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

dashes-color e dashes-width​

Cor e largura dos traços usados em trilhas, caminhos, escadas e limites:

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

linecap​

Formato das extremidades: none, square ou round.

linejoin​

Formato das junções: round, miter, bevel ou auto.

Parâmetros de texto​

text​

Texto desenhado ao lado de um ponto ou no centro de uma linha ou polígono:

node,area|z2-8[place=country] {
    text: eval(locTag('name'));
    // Outros parâmetros omitidos
}

font-weight​

Peso da fonte: bolder, bold, normal, light ou 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​

Tamanho da fonte.

font-stroke-width e font-stroke-color​

Largura e cor do contorno da fonte.

text-color​

Cor do texto:

node,area|z2-8[place=country] {
    text: eval(locTag('name'));
    text-color: @color_name_text;
    text-priority: 10;
    // Outras etiquetas omitidas
}

text-priority​

Quando não há espaço para todas as etiquetas, define qual texto aparece primeiro.

text-allow-overlap​

Permite que as etiquetas ocupem a mesma área.

text-big-padding​

Reserva o dobro de espaço ao redor do texto. É útil para cidades e outros assentamentos importantes, evitando que as etiquetas encubram o mapa.

icon-image​

Nome da imagem exibida em um ponto ou no centro de um polígono:

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

icon-image aceita imagens inline em base64:

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

icon-scale​

Aumenta ou reduz a imagem em relação ao tamanho original.

icon-tint​

Recolore a imagem. #FFF permanece branco; #CCC recebe um tom mais claro; #888 corresponde à cor escolhida; #444 recebe um tom mais escuro; e #000 permanece preto. As cores intermediárias são combinadas suavemente.

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

Deslocam a imagem em relação ao ponto de ancoragem. Por padrão, ela fica centralizada. Por exemplo, icon-offset-y: 0; alinha a base de um alfinete ao ponto de destino. Os valores vão de 0 a 1: 0 representa a borda inferior ou esquerda e 1, a superior ou direita.

image-allow-overlap​

Permite que os ícones se sobreponham.

Parâmetros dos detalhes​

Use details-text e details-description para definir o nome e a descrição de objetos GeoJSON. O primeiro aparece como título e o segundo como descrição. Se ambos estiverem vazios, os toques no objeto serão ignorados. Esses parâmetros aceitam expressões.

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

Expressões​

Filtros e parâmetros podem depender de fatores externos, ser calculados por fórmulas ou variar com o zoom. Valores calculados sempre começam com eval().

Funções disponíveis:

min e max​

Retornam o menor ou o maior valor. A quantidade de parâmetros não é limitada.

any​

Retorna o primeiro valor que não seja null e aceita qualquer quantidade de argumentos.

data​

Decodifica uma string base64 para uso com icon-image e fill-image.

tag​

Retorna o valor da etiqueta indicada ou null se ela não existir.

locTag​

Retorna o valor localizado de acordo com as preferências de idioma. Se a ordem for inglês, russo e idioma local, por exemplo, locTag('name') procura name:en, depois name:ru e por fim name, usando o primeiro valor disponível. O Guru Maps oferece suporte a be, cs, da, de, en, es, fr, it, ja, ko, nl, pl, ru, sv, uk e zh. Use locTag() para esses idiomas e tag() diretamente para os demais.

cond​

Avalia uma condição lógica. Se o primeiro argumento for verdadeiro, retorna o segundo; caso contrário, retorna o terceiro.

// Verifica addr:housenumber
    text: eval( cond( tag('addr:housenumber'),
    // Se houver número, concatena a próxima condição
        tag('addr:housenumber') . cond( any( locTag('name'), tag('addr:housename') ),
            // Se houver nome, coloca-o entre parênteses
            ' (' . any( locTag('name'), tag('addr:housename') ) . ')',
            // Caso contrário, usa uma string vazia
            ''),
    // Sem número, usa name ou addr:housename
    any( locTag('name'), tag('addr:housename') ) ) );

boolean​

Converte o valor em booleano. Se estiver ausente ou for igual a 0, No, Off ou False, sem diferenciar maiúsculas de minúsculas, retorna false; nos outros casos, retorna true.

zlinear​

Altera um valor suavemente com o zoom. O primeiro parâmetro é o nível inicial; os demais são os valores de cada nível seguinte.

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

Nesse exemplo, a via tem 1 pixel no zoom 13, 1 ponto no zoom 14 e o maior valor entre 2 pontos e 4 metros a partir do zoom 15.

metric​

Converte um parâmetro numérico em metros.

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

O número de faixas é multiplicado por 2 para obter a distância em metros. max(3pt, metric()) retorna o maior valor entre a largura em metros e em pontos.

Operadores de expressões​

As expressões aceitam os operadores matemáticos +, -, * e /, o operador de concatenação de strings ., e os comparadores <, >, == e ~= (correspondência de substring).