Примеры стилизации

Штриховки (паттерны), графические элементы могут быть в формате svg или png. Если цвет не "зашит" внутрь svg, его можно окрашивать в разные цвета из CartoCSS. При стилизации полигонов паттернами важно, чтобы размер изображений по высоте/ширине был кратен 2. Для корректного отображения необходимо учитывать коэффициент 1 мм = 3,5 px.

Линии Описание CartoCSS
Толщина условного знака 0,3 мм, графические элементы в виде разнонаправленных стрелок, отстоящих друг от друга на расстояние 6,0 мм, отображаются через 16,0 мм. 
::main {
  line-width: 1.05;
  line-color: #0099ff;
  marker-file: url("img/p10_arrow.v2.svg");
  marker-transform: translate(-10.5, 0);
  marker-spacing: 56.0;
  marker-fill: #0099ff;
  marker-allow-overlap: true;
  marker-placement: line;
}
::second {
  marker-file: url("img/p10_arrow.v2.svg");
  marker-transform: translate(10.5, 0) rotate(180,0,0);
  marker-spacing: 56.0;
  marker-fill: #0099ff;
  marker-allow-overlap: true;
  marker-placement: line;
}
Толщина линии 0,7 мм, графические элементы диаметром 1,5 мм отображаются через 16,0 мм. 
{
  line-width: 2.45;
  line-color: #000;
  marker-width: 5.25;
  marker-spacing: 56.0;
  marker-fill: #fff;
  marker-line-color: #000;
  marker-line-width: 2.45;
  marker-allow-overlap: true;
  marker-placement: line;
}
Толщина условного знака 0,5 мм, штрихи 7,0 мм через 1,5 мм, графические элементы диаметром 1,5 мм отображаются через 16,0 мм. 
{
  line-width: 1.75;
  line-dasharray: 24.5, 5.25;
  line-color: #00a9e6;
  marker-width: 5.25;
  marker-spacing: 56.0;
  marker-fill: white;
  marker-line-color: #00a9e6;
  marker-line-width: 1.75;
  marker-allow-overlap: true;
  marker-placement: line;
}
Толщина условного знака 0,5 мм, графические элементы в виде стрелки отображаются через 20,0 мм. 
{
  line-width: 1.75;
  line-color: #ff0000;
  marker-file: url("img/p10_arrow.v2.svg");
  marker-transform: rotate(180,0,0);
  marker-spacing: 70.0;
  marker-fill: #a80000;
  marker-allow-overlap: true;
  marker-placement: line;
}
Толщина условного знака 2,5 мм, штрихи 7,0 мм интервал 7,0 мм, толщина крайних линий 0,15 мм. 
::out {
  line-width: 8.75;
  line-color: #000;
}
::in {
  line-color: #fff;
  line-width: 7.69;
  line-dasharray: 24.5, 24.5;
}
Толщина условного знака 0,85 мм, штрихи 0,3 мм, через 0,3 мм, толщина условного знака 0,5 мм, штрихи 2,0 мм, через 1,5 мм. 
::out {
  line-color: #000;
  line-opacity: 1.0;
  line-dasharray: 1, 1;
  line-width: 3.0;
}
::in {
  line-color: #fff;
  line-dasharray: 7, 5;
  line-width: 1.5;
}
Толщина условного знака 1,1 мм, толщина условного знака 0,6 мм, штрихи 0,9 мм, через 0,3 мм. 
::out {
  line-color: #000;
  line-opacity: 0.1;
  line-width: 4.0;
}
::in {
  line-color: #ffff00;
  line-dasharray: 3, 1;
  line-width: 2.0;
}
Толщина условного знака 0,5 мм, штрихи 6,0 мм, через 1,0 мм, 0,5 мм, через 1,0 мм, 0,5 мм, через 1,0 мм. 
{
  line-width: 1.9;
  line-color: #df0024;
  line-opacity: 1.0;
  line-dasharray: 22.8, 3.8, 1.9, 3.8, 1.9, 3.8;
}
Толщина условного знака 0,5 мм, штрихи 6,0 мм через 2,0 мм. 
{
  line-width: 1.9;
  line-color: #df0024;
  line-opacity: 1.0;
  line-dasharray: 22.8, 7.6;
}
Полигоны Описание CartoCSS
Толщина условного знака границы площадного объекта 0,4 мм, штрихи 5,0 мм через 2,0 мм, графический V - образный элемент, состоящий из двух линий, расположенных под углом 45º к оси линии и имеющих длину 1,0 мм, расходящихся из единого центра, располагать посередине штриха 5,0 мм, фоновая заливка отсутствует. 
{
  line-width: 1.4;
  line-dasharray: 17.5, 7.0;
  line-color: #004b96;
  marker-file: url("img/p10_i603011101.v2.svg");
  marker-spacing: 17.5;
  marker-fill: #004b96;
  marker-allow-overlap: true;
  marker-placement: line;
}
Толщина условного знака границы площадного объекта 0,3 мм, вертикальные штрихи высотой 0,5 мм толщиной 0,15 мм отображаются через 10,0 мм, фоновая заливка отсутствует. 
{
  line-width: 1.05;
  line-color: #000;
  marker-file: url("img/p10_i603010101.v2.svg");
  marker-spacing: 35.0;
  marker-allow-overlap: true;
  marker-placement: line;
}
Толщина условного знака границы площадного объекта 0,8 мм, средняя линия 0,15 мм, графические элементы диаметром 0,8 мм отображаются через 2,0 мм, фоновая заливка отсутствует. 
{
  line-width: 2.8;
  line-color: #fff;
  marker-width: 2.8;
  marker-spacing: 7.0;
  marker-fill: #704489;
  marker-line-width: 0;
  marker-allow-overlap: true;
  marker-placement: line;
}
Толщина условного знака границы площадного объекта 0,5 мм, вертикальные штрихи толщиной 0,15 мм и высотой 0,6 мм отображать тройками с интервалом 1,0 мм через 15,0 мм, фоновая заливка отсутствует. 
{
  line-width: 1.75;
  line-color: #703838;
  marker-file: url("img/p10_i603010301.v2.svg");
  marker-spacing: 52.5;
  marker-allow-overlap: true;
  marker-placement: line;
}
Толщина условного знака границы площадного объекта 0,4 мм, штрих 5,0 мм интервал 1,0 мм, штрих 1,0 мм интервал 1,0 мм, штрих 1,0 мм, графический V - образный элемент, состоящий из двух линий, расположенных под углом 45º к оси линии и имеющих длину 1,0 мм, расходящихся из единого центра, располагать посередине штриха 5,0 мм, фоновая заливка отсутствует. 
{
  line-width: 1.4;
  line-dasharray: 17.5, 3.5, 3.5, 3.5, 3.5, 3.5;
  line-color: #0064c8;
  marker-file: url("img/p10_i603011101.v2.svg");
  marker-spacing: 17.5;
  marker-fill: #0064c8;
  marker-allow-overlap: true;
  marker-placement: line;
}
Толщина условного знака границы площадного объекта 0,4 мм, графические элементы в виде крестов 1,0*1,0 мм отображаются через 15,0 мм, фоновая заливка отсутствует. 
{
  line-width: 1.4;
  line-color: #ff0000;
  marker-file: url("img/p10_i603011401.svg");
  marker-spacing: 52.5;
  marker-fill: #ff0000;
  marker-allow-overlap: true;
  marker-placement: line;
}
Толщина условного знака границы площадного объекта 0,3 мм, графические элементы в виде крестов 1,0*1,0 мм отображаются через 15,0 мм, фоновая заливка отсутствует. 
::main {
  line-width: 1.05;
  line-color: #aa66cd;
  marker-width: 10.5;
  marker-spacing: 52.5;
  marker-allow-overlap: true;
  marker-comp-op: clear;
  marker-placement: line;
}
::second {
  marker-file: url("img/p10_i603010801.svg");
  marker-width: 7.0;
  marker-spacing: 52.5;
  marker-fill: #aa66cd;
  marker-allow-overlap: true;
  marker-placement: line;
}
Толщина условного знака границы площадного объекта 0,3 мм, толщина линий штриховки 0,15 мм, угол наклона 45º, интервал между линиями штриховки 1,0 мм, фоновая заливка отсутствует. 
{
  line-width: 1.05;
  line-color: #000;
  polygon-fill: #00a800;
  polygon-pattern-file: url("img/p10_hatch.v2.svg");
  polygon-pattern-comp-op: dst-in;
  opacity: 0.999999; // bugfix
}
Толщина условного знака границы площадного объекта 0,15 мм, графические элементы в виде крестов 2,0*2,0 мм отображаются через 5,0 мм в шахматном порядке. 
{
  line-width: 0.53;
  line-color: #000;
  polygon-fill: #305000;
  polygon-pattern-file: url("img/p10_cross.v2.svg");
}
Толщина условного знака границы площадного объекта 0,15 мм, графические элементы в виде крестов 2,0*2,0 мм отображаются через 5,0 мм в шахматном порядке, толщина линий штриховки 0,15 мм, угол наклона 45º, интервал между линиями штриховки 1,0 мм. 
{
  line-width: 0.53;
  line-color: #000;
  polygon-fill: #305000;
  polygon-pattern-file: url("img/p10_hatch_cross.v2.svg");
}
Толщина условного знака границы площадного объекта 0,6 мм, толщина линий штриховки 0,15 мм, интервал между линиями штриховки 2,0 мм, фоновая заливка отсутствует. 
{
  line-width: 2.1;
  line-color: #aaff00;
  polygon-fill: #aaff00;
  polygon-pattern-file: url("img/p10_i605010101.svg");
  polygon-pattern-comp-op: dst-in;
  opacity: 0.999999; // bugfix
}
Толщина условного знака границы площадного объекта 0,1 мм, фоновая заливка отсутствует. 
{
  polygon-pattern-file: url('img/boloto_1.png');
  polygon-pattern-opacity: 1.0;
  line-color: #e5d7d0;
  line-opacity: 0.1;
  line-width: 0.4;
}
Толщина условного знака границы площадного объекта 0,5 мм, графические элементы в виде треугольников 2,0*2,0 мм отображаются через 20,0 мм, толщина линий штриховки 0,15 мм, угол наклона 45º, интервал между линиями штриховки 2,0 мм, фоновая заливка отсутствует. 
::main {
  polygon-fill: transparent;
  line-color: #df0024;
  line-width: 1.9;
  marker-file: url("img/sprit_priaerodromv2.svg");
  marker-transform: translate(0, -4);
  marker-spacing: 76.0;
  marker-fill: transparent;
  marker-allow-overlap: true;
  marker-placement: line;
}
::second {
  polygon-fill: #694720;
  polygon-pattern-file: url("img/p10_hatch.v2.svg");
  polygon-pattern-comp-op: dst-in;
  opacity: 0.999999; // bugfix
}
Толщина условного знака границы площадного объекта 0,5 мм, графические элементы в виде прямоугольников 0,62*2,5 мм отображаются через 20,0 мм, толщина линий штриховки 0,15 мм, угол наклона 90º, интервал между линиями штриховки 4,0 мм, фоновая заливка отсутствует. 
::main {
  polygon-fill: transparent;
  line-color: #df0024;
  line-width: 1.9;
  marker-file: url("img/sprit_ohranzon.svg");
  marker-transform: translate(0, -4);
  marker-spacing: 76.0;
  marker-allow-overlap: true;
  marker-placement: line;
}
::second {
  polygon-fill: #20e6f2;
  polygon-pattern-file: url("img/p10_hatchv6.svg");
  polygon-pattern-comp-op: dst-in;
  opacity: 0.999999; // bugfix
}
Толщина условного знака границы площадного объекта 0,5 мм, штрихи 6,0 мм через 4,0 мм, графические элементы в виде треугольников 2,0*2,0 мм отображаются через 20,0 мм, толщина линий штриховки 0,15 мм, угол наклона 45º, интервал между линиями штриховки 2,0 мм, фоновая заливка отсутствует. 
::main {
  polygon-fill: transparent;
  line-color: #df0024;
  line-width: 1.9;
  line-opacity: 1.0;
  line-dasharray: 22.8, 15.2;
  marker-file: url("img/sprit_priaerodromv2.svg");
  marker-line-color: #df0024;
  marker-fill: transparent;
  marker-transform: translate(12, -4), rotate(180,0,0);
  marker-spacing: 76.0;
  marker-allow-overlap: true;
  marker-placement: line;
}
::second {
  polygon-fill: #009f3c;
  polygon-pattern-file: url("img/p10_hatch.v2.svg");
  polygon-pattern-comp-op: dst-in;
  opacity: 0.999999; // bugfix
}
Толщина условного знака границы площадного объекта 0,5 мм, графические элементы в виде круга диаметров 3,0 мм отображаются через 20,0 мм, толщина линий штриховки 0,15 мм, угол наклона 135º, интервал между линиями штриховки 2,0 мм, фоновая заливка отсутствует. 
::main {
  line-width: 1.9;
  line-color: #df0024;
  marker-file: url("img/sprit_prirodpamyat.svg");
  marker-spacing: 76.0;
  marker-transform: translate(0, -5);
  marker-fill: #df0024;
  marker-allow-overlap: true;
  marker-placement: line;
}
::second {
  polygon-fill: #f8f400;
  polygon-pattern-file: url("img/p10_hatchv4.svg");
  polygon-pattern-comp-op: dst-in;
  opacity: 0.999999; // bugfix
}
Подписи Описание CartoCSS
Подписи отображаются вдоль дорог, цвет, шрифт, размер подписей задается в коде. В слоях с полигональной и точечной геометрией такое расположение подписей будет работать неккоректно. 
{
  text-name: [text];
  text-face-name: "Arial Regular";
  text-size: 10.0;
  text-fill: #000;
  text-opacity: 1.0;
  text-halo-radius: 1.0;
  text-halo-fill: rgba(255, 255, 255, 1);
  text-placement: line;
  text-spacing: 200.0;
}
Подписи к водным поверхностям расположены в северо-восточном направлении относительно объектов. Цвет, шрифт, размер подписей задается в коде. 
{
  text-name: [text];
  text-face-name: "Arial Italic";
  text-size: 11.0;
  text-fill: #6677cd;
  text-opacity: 0.9;
  text-halo-radius: 1.0;
  text-halo-fill: rgba(255, 255, 255, 1);
  text-wrap-width:30.0;
  text-dx: 10.0;
  text-dy: 10.0;
  text-placement-type: simple;
  text-placements: 'NE';
}
Zoom Описание CartoCSS

Толщина условного знака границы площадного объекта 0,15 мм, установлен масштаб отображения объектов слоя равный 16. 
[zoom < 16] {marker-transform: 'scale(0.7)';}

::main [zoom >= 16] {
  polygon-fill: #d7c29e;
  polygon-opacity: 1.0;
  line-color: #56421e;
  line-opacity: 1.0;
  line-width: 0.5;
}
Примечание: Указанные в таблицах штриховки и графические элементы можно скачать здесь.