Styly pro vykreslování dat OpenStreetMap
Styly pro vykreslování dat OpenStreetMap

CARTOCSS

  • CartoCSS je tzv. preprocesor stylů Mapnik vyvinutý společností MapBox. 
  • Je napsán v programovacím jazyce JavaScript.
  • Pomocí CartoCSS se vytváří jednotlivé styly mapy obdobně jako styly pro webové stránky na základě CSS stylů, ze kterých CartoCSS vychází (odtud koncovka CSS), jedná se v podstatě jen o jejich úpravu pro kartografické účely.
  • Oproti kódu Mapnik XML je kód CartoCSS významně kratší a svojí strukturou jednodušší. Tento fakt potvrzuje i dnešní trend, kdy většina stylů Mapnik napsaná v jazyce Mapnik XML přechází do CartoCSS. 
  • Samotný kód CartoCSS stylu je uložen v souboru s příponou .mss (Map Stylesheet files). Tento soubor obsahuje definice vrstev a stylů pro každou vrstvu v mapě. 
    • Tyto definice vrstev jsou pak propojeny souborem .mml (Map Markup Language file), což je soubor ve formátu YAML nebo JSON, který obsahuje odkazy na zdroje dat a na soubory .mss. 
    • MML soubor také umožňuje definovat vlastnosti mapy jako celku, jako jsou projekce, rozlišení a nějaké obecné nastavení. 
    • Pokud generujete Mapnik XML ze stylu CartoCSS, pak soubor .mml se používá jako vstup pro generování jazyka/formátu Mapnik XML. 
  • Šablony stylů CartoCSS používají konkrétně nástroje TileMill, Mapnik a Kosmtik. Nástroj Mapbox Studio tento jazyk/formát taktéž využíval, momentálně však využívá novější jazyk Mapbox Style.  
  • Tento jazyk se používá ve stylových šablonách neboli mapových vrstvách portálu OSM, a to v Humanitární mapě, Standardní mapě a mapách  určených pro cyklisty CyclOSM a Cyklomapě.
  • Stylový formát CartoCSS je výrazně ovlivněný jazykem Cascadenik, ze kterého částečně vychází. 
    • Cascadenik byl taktéž preprocesorem stylových šablon Mapniku, jež zpracovával styly v kaskádových stylech CSS, které si následně nástroj Mapnik převedl do svého jazykového formátu Mapnik XML, díky čemuž pak došlo k vytvoření samotného stylu v tomto vizuálním editoru, tj. Mapnik.
    • Jeho vývoj byl zastavený v roce 2014 a jeho nástupcem se stal právě CartoCSS.
  • CartoCSS podporuje značně velké množství formátů – stejné jako Mapnik XML (např. ESRI shapefiles, PostGIS, TIFF, OSM, GDAL, OGR, CSV), což je nejdůležitější a největší rozdíl mezi CartoCSS a MapCSS, který slouží pouze ke stylování dat OSM. 
  • Stejně jako MapCSS se skládá z pravidel, #selektoru a deklarace – {vlastnost: hodnota;}. Před selektor (název vrstvy) se píše #, následuje deklarace ve složené závorce, která se od další deklarace odděluje středníkem, vlastnost od hodnoty pak odděluje dvojtečka. 

*preprocesor = program, který zpracovává vstupní data tak, aby výstup mohl dále zpracovávat jiný program; používán pro předzpracování zdrojového kódu před vlastní kompilací – softwarový nástroj používaný pro vývoj softwaru (IT SLOVNÍK, 2022)

(OPENSTREETMAP WIKI 2023i; CARTO 2023)

Základní vlastnosti CartoCSS

  • Selektory (Selectors): Selektory umožňují definovat, na které prvky se bude styl aplikovat.
  • Atributy-Vlastnosti (Properties): Vlastnosti určují, jak se mají vybrané prvky zobrazit, jako jsou barvy, velikosti, obecně nějaký styl.
  • Hodnoty (Values): Hodnoty určují konkrétní parametry pro každou vlastnost, jako jsou konkrétní barvy nebo konkrétní velikost.
  • Proměnné (Variables): Proměnné umožňují definovat hodnoty, které se budou používat opakovaně v rámci stylu.
  • Funkce (Functions): Funkce umožňují aplikovat složitější transformace na vybrané prvky, jako jsou například matematické operace nebo transformace geometrie.
(CARTOCSS 2017; CARTO 2023)

Ukázka kódu

Ukázka CartoCSS
Zdroj: vlastní zpracování
  • Tento kód definuje pro silnice II. třídy černou barvu, velikost linie na 2 pixely a průhlednost na 0,8. Pozadí má nastavenou bílou barvu.

Popis kódu silnice II. třídy

Map:

  • Definuje soubor (celou mapu) a nastavuje její souřadnicový systém na EPSG:4326.
  • Nastavuje bílé pozadí mapy pomocí background-color: #FFFFFF;

#roads [highway='secondary']:

  • Tato vrstva vybírá všechny silnice II. třídy v OpenStreetMap pomocí značky [highway='secondary'].
  • Nastavuje barvu silnic pomocí line-color: #000000;
  • Nastavuje šířku silnic pomocí line-width: 2;
  • Nastavuje průhlednost silnic pomocí line-opacity: 0.8.
(CARTOCSS 2017; CARTO 2023)
Ukázka CartoCSS
Zdroj: vlastní zpracování
Popis kódu zastávky autobusu (trolejbusu) na Konečného náměstí, Brno

Map:

  • Definuje soubor (celou mapu)  a nastavuje její souřadnicový systém na EPSG:4326.

#bus-stop-layer:

  • Vybere vrstvu, která bude obsahovat zastávky autobusů.
  • Nastaví parametry pro zobrazování bodové vrstvy:
    • marker-width: šířka bodu v pixelech
    • marker-height: výška bodu v pixelech
    • marker-file: soubor s ikonou, která bude použita pro zastávky autobusů
    • marker-allow-overlap: umožní překrývání bodů (aby se body na stejné pozici nekryly)

[highway='bus_stop']:

  • Vybere prvky na vrstvě, které mají klíč "highway" a hodnotu "bus_stop".
  • Nastaví parametry pro zobrazování bodové vrstvy:
    • marker-width: šířka bodu v pixelech
    • marker-height: výška bodu v pixelech
    • marker-file: soubor s ikonou, která bude použita pro zastávky autobusů
    • marker-allow-overlap: umožní překrývání markerů (aby se markery na stejné pozici nekryly)

Layer:

  • Definuje zdroj dat pro vrstvu zastávek autobusů:
    • type: typ dat (v tomto případě osm)
    • bbox: souřadnice, které ohraničují oblast, ve které se mají zobrazit zastávky autobusů
    • filter: určuje, které prvky se mají na vrstvě zobrazit (v tomto případě vybere jen uzly s klíčem "highway" a hodnotou "bus_stop")
(CARTOCSS 2017; CARTO 2023)

Zdroje

CARTO (2023): CartoCSS Properties, https://carto.com/developers/styling/cartocss/ (30. 4. 2023).

CARTOCSS (2017): Documentation,  (21.1.2023).

IT SLOVNÍK (2022): Co je to Preprocesor? https://it-slovnik.cz/pojem/preprocesor (29.1.2023).

OPENSTREETMAP WIKI (2023i): CartoCSS, https://wiki.openstreetmap.org/wiki/CartoCSS (21.1.2023).

Předchozí
Následující