Passa al contenuto principale

Stile della mappa

Un file di stile MapCSS contiene regole applicate a ogni oggetto dall'alto verso il basso.

Ad esempio, questo stile:

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

mostra l'immagine tree.svg sui punti il cui tag natural ha valore tree.

Ogni regola ha due parti: il filtro node[natural=tree] e i parametri di disegno icon-image: tree.svg;. Il filtro determina a quali oggetti applicare i parametri.

Le regole possono essere annidate e i parametri definiti a ogni livello.

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

Le regole annidate mantengono lo stile conciso e ordinato: i parametri comuni vengono definiti una volta sola invece di ripeterli in più blocchi.

Questa documentazione descrive il dialetto MapCSS usato da Guru Maps. Alcuni parametri del linguaggio originale non sono implementati, ma sono supportate macro di pre-elaborazione, regole annidate e nuove funzioni per i calcoli. Lo stile di Guru Maps è disponibile nel repository.

Filtri​

Consideriamo un filtro complesso:

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

È composto da:

  1. Filtro del tipo node,area: usa node per i punti, line per le linee e area per i poligoni. Separa più tipi con virgole oppure usa * quando il tipo non è importante.
  2. Filtro di zoom z14-: indica i livelli ai quali si applica la regola. Puoi specificare solo il minimo, ad esempio z8-, oppure un intervallo come z3-9; in quest'ultimo caso si applica dai livelli 3 a 8 inclusi.
  3. Filtri dei tag [boundary=forest_compartment][ref]: selezionano gli oggetti con tag boundary uguale a forest_compartment e qualsiasi valore in ref. Per selezionare oggetti privi del tag ref, usa [!ref].

Puoi separare più filtri con virgole:

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

In questo esempio i parametri comuni possono essere spostati a un livello superiore:

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

    }
}

Per riunire più regole in un gruppo, racchiudi i filtri tra parentesi senza aprire ancora il blocco:

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

Macro di pre-elaborazione​

Il preprocessore prepara lo stile per l'analisi: sostituisce valori e attiva o disattiva blocchi secondo le impostazioni.

Macro di sostituzione​

@import​

Inserisce il contenuto del file indicato:

@import "polygons.mapcss";

@{name}​

Inserisce il valore di una macro nel punto in cui viene usata:

// Definisce un colore
@color_ground: #EAE3D3;

// Poi lo usa così
canvas
{
    fill-color: @color_ground;
}

Condizioni​

@if​

Controlla un parametro e include o esclude un blocco dallo stile:

@if Theme == Dark
    @import "colors_dark.mapcss";
@else // Colori predefiniti
    @import "colors.mapcss";
@endif

Guru Maps usa questi parametri di pre-elaborazione:

  • Theme {Light, Dark}: tema attuale dell'app;
  • Style {Default, Outdoor}: stile attuale della mappa;
  • SubStyle {Car, Hike, Bike}:
    • Car per la guida;
    • Hike per l'escursionismo;
    • Bike per la bicicletta.

@else​

Definisce il blocco eseguito quando la prima condizione è falsa.

@elif​

Contiene una condizione valutata se quelle precedenti non sono state soddisfatte.

@endif​

Chiude il blocco della condizione attuale.

Parametri di disegno​

Questi parametri controllano come vengono disegnati gli oggetti sulla mappa.

Valori dei parametri​

Larghezza​

Lo spessore di una linea, width, può essere espresso in pixel 1px, punti 2pt, metri 3m o con un'espressione come eval( zlinear( 13, 1px,1pt,max(2pt, 4m)) );. Consulta Espressioni.

Colore​

Usa #RGB, #RRGGBB, #RRGGBBAA oppure un nome dall'elenco dei colori CSS.

Testo​

Qualsiasi sequenza tra virgolette singole o doppie è considerata testo.

'string'
"another string"

Ordine di disegno​

layer​

Il numero della proprietà layer separa i diversi livelli di rendering della mappa.

// Per ogni oggetto con il tag 'layer', imposta la proprietà 'layer' sul valore del tag
*|z9-[layer] {
    layer: eval(tag(layer));
}

z-index​

z-index stabilisce l'ordine di disegno degli oggetti dello stesso tipo all'interno di un livello.

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

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

Parametri dei poligoni​

fill-color​

Colore di riempimento del poligono.

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

fill-image​

Immagine di riempimento del poligono.

// Immagine di riempimento di un'area militare visualizzata sopra gli altri oggetti
area|z11- {
    [landuse=military],
    [military=danger_area] {
        z-index: 2;
        fill-image:"forbiddenArea.png";
    }
}

fill-image supporta stili incorporati con dati base64.

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

color e width per i poligoni​

Colore e larghezza del bordo.

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

Parametri delle linee​

color e width per le linee​

Colore e larghezza della linea.

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

casing-color e casing-width​

Colore e larghezza del contorno di una linea, usati soprattutto per le strade.

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

dashes​

Lunghezze dei segmenti pieni e vuoti. La somma deve essere una potenza di 2 — 4, 8, 16, 32, 64 e così via — e ogni numero indica la lunghezza in punti.

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

dashes-color e dashes-width​

Colore e larghezza dei tratti usati per sentieri, percorsi, scale e confini.

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

linecap​

Forma delle estremità della linea. Valori possibili: none, square, round.

linejoin​

Forma delle giunzioni. Valori possibili: round, miter, bevel, auto.

Parametri del testo​

text​

Testo disegnato accanto a un punto o centrato su una linea o un poligono.

node,area|z2-8[place=country] {
    text: eval(locTag('name'));
    // Gli altri parametri sono omessi
}

font-weight​

Spessore del carattere. Valori possibili: 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​

Dimensione del carattere.

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

Larghezza e colore del contorno del carattere.

text-color​

Colore del testo.

node,area|z2-8[place=country] {
    text: eval(locTag('name'));
    text-color: @color_name_text;
    text-priority: 10;
    // Gli altri tag sono omessi
}

text-priority​

Quando più etichette competono per lo stesso spazio, determina quale mostrare per prima.

text-allow-overlap​

Permette alle etichette di sovrapporsi.

text-big-padding​

Riserva il doppio dello spazio intorno al testo. Usalo per centri importanti — città, paesi, quartieri e così via — per evitare che le etichette nascondano la mappa.

icon-image​

Nome dell'immagine mostrata su un punto o al centro di un poligono.

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

icon-image supporta stili incorporati con dati base64.

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

icon-scale​

Cambia la scala dell'immagine per mostrarla più grande o più piccola dell'originale.

icon-tint​

icon-tint ricolora un'immagine. #FFF resta bianco; #CCC diventa una versione chiara del colore scelto; #888 corrisponde al colore; #444 ne assume una versione scura; #000 resta nero. I colori sfumano gradualmente tra questi punti.

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

Spostano l'immagine rispetto al punto di ancoraggio. Per impostazione predefinita è centrata sul punto della mappa. Ad esempio, icon-offset-y: 0; allinea la parte inferiore di un'icona a spillo al punto di destinazione. I valori vanno da 0 a 1: 0 rappresenta il bordo inferiore o sinistro, 1 quello superiore o destro.

image-allow-overlap​

Permette alle icone di sovrapporsi.

Parametri dei dettagli​

Usa details-text e details-description per definire nome e descrizione degli oggetti GeoJSON. details-text appare come titolo e details-description come descrizione. Se entrambi sono vuoti, i tocchi sull'oggetto vengono ignorati. I parametri supportano espressioni.

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

Espressioni​

Filtri e parametri di disegno possono dipendere da fattori esterni, essere calcolati con formule o variare secondo lo zoom.

I valori calcolati devono sempre iniziare con eval().

All'interno puoi usare queste funzioni:

min e max​

Restituiscono il valore minimo o massimo dei parametri. Il numero di parametri non è limitato.

any​

Restituisce il primo valore diverso da null. Accetta un numero qualsiasi di argomenti.

data​

Decodifica una stringa base64. Può essere usata in icon-image e fill-image.

tag​

Restituisce il valore del tag indicato o null se non esiste.

locTag​

Restituisce il valore localizzato di un tag secondo le lingue preferite dell'utente. Ad esempio, se l'elenco contiene inglese, russo e lingua locale, locTag('name') controlla name:en, poi name:ru e infine name, usando la prima corrispondenza. Guru Maps supporta be, cs, da, de, en, es, fr, it, ja, ko, nl, pl, ru, sv, uk e zh. Usa locTag() per queste lingue e chiama esplicitamente tag() per le altre.

cond​

Valuta un'espressione logica. Se il primo argomento è vero restituisce il secondo, altrimenti il terzo.

// Controlla addr:housenumber
    text: eval( cond( tag('addr:housenumber'),
    // Se addr:housenumber esiste, concatena la condizione successiva
        tag('addr:housenumber') . cond( any( locTag('name'), tag('addr:housename') ),
            // Se name o addr:housename esiste, racchiudilo tra parentesi
            ' (' . any( locTag('name'), tag('addr:housename') ) . ')',
            // Altrimenti usa una stringa vuota
            ''),
    // Se il numero civico non esiste, usa name o addr:housename
    any( locTag('name'), tag('addr:housename') ) ) );

boolean​

Converte il valore in booleano. Se manca o equivale a 0, No, Off o False, senza distinzione tra maiuscole e minuscole, restituisce false; negli altri casi restituisce true.

zlinear​

Cambia gradualmente il valore secondo lo zoom. Il primo parametro è il livello iniziale, seguito dai valori per ogni livello successivo.

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

Nell'esempio la strada misura 1 pixel al livello 13, 1 punto al 14 e, dal livello 15, il valore maggiore tra 2 punti e 4 metri.

metric​

Converte il parametro numerico in metri.

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

Qui il numero di corsie viene moltiplicato per 2 per ottenere una distanza in metri. max(3pt, metric()) restituisce la larghezza maggiore.

Operatori delle espressioni​

Le espressioni supportano gli operatori matematici +, -, *, /, l'operatore . per concatenare stringhe e gli operatori di confronto <, >, == e ~= per cercare sottostringhe.