Стиль карты
Файл стиля состоит из правил, которые применяются к каждому объекту сверху-вниз.
Например стиль:
node[natural=tree] {
icon-image: "tree.svg";
}
отобразит картинку tree.svg
для точек у которых тег natural
имеет значение tree
.
Каждое правило в стиле состоит из двух частей. Фильтра node[natural=tree]
и параметров прорисовки icon-image: "tree.svg";
. Фильтр выбирает к каким объектам надо применить параметры.
Правила могут быть вложенными и устанавливать параметры на каждом из уровней.
|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";
}
}
Вложенные правила делают стиль лаконичным, с четко видной структурой. Так общие параметры можно установить заранее и не копировать по нескольку раз.
Эта документация описывает стиль карты, используемый в приложении Guru Maps. Изначально он был похож на MapCSS, но по мере разработки приложения и усложнения стиля было решено добавить в него некоторые уникальные черты. Была добавлена вложенность правил, команды препроцессора для подстановки и условий, добавлены новые функций для вычисляемых операций. В то же время часть параметров прорисовки и функций из спецификации MapCSS не была реализована.
Стиль и иконки, используемые в Guru Maps, вы можете найти в публичном репозитории https://github.com/GuruMaps/MapStyle.
Фильтры
Рассмотрим сложный фильтр:
node,area|z14-[boundary=forest_compartment][ref]
Он состоит из:
- фильтра по типу
node,area
. Он может бытьnode
для точек,line
для линий,area
для полигонов. Если надо указать несколько типов они разделяются запятой. Так же можно использовать*
, если тип не важен. - фильтра масштаба
z14-
. Он указывает для каких масштабов должно срабатывать правило. Может быть только минимальным масштабомz8-
, или интерваломz3-9
. В таком случае правило будет применено для на масштабах с 3-го по 8 включительно. - фильтра параметров
[boundary=forest_compartment][ref]
. Такой фильтр оставит только объекты у которых тегboundary
имеет значениеforest_compartment
, а так же установлено любое значение для тегаref
.Чтобы оставить объекты у которых нет значения тегаref
можно написать[!ref]
.
Несколько фильтров можно перечислить через запятую. Например:
node,area|z14-[boundary=forest_compartment][ref],
node,area|z14-[boundary=forestry_compartment][ref]
Общие параметры можно вынести на отдельный уровень:
node,area|z14-[ref] {
[boundary=forest_compartment],
[boundary=forestry_compartment] {
}
}
Иногда бывает необходимо объединить несколько правил в группу. Она начинается скобкой (
и заканчивается скобкой )
. Группа объединит несколько фильтров и после группы не обязательно начинать блок с правилами.
node,area|z14-[ref](
[boundary=forest_compartment],
[boundary=forestry_compartment]) {
}
}
Препроцессор
Препроцессор подготавливает стиль к парсингу. Подставляет общие значения, включает или выключает какие-то блоки в зависимости от настроек.
Макросы подстановки
@import
Вставляет содержимое указанного файла.
@import "polygons.mapcss";
@{name}
Вставляет значение макроса, во все места где он использован.
// Define color using
@color_ground: #EAE3D3;
// then use it as
canvas {
fill-color: @color_ground;
}
Условия
@if
Проверяет параметр и включает или исключает блок из стиля:
@if Theme == Dark
@import "colors_dark.mapcss";
@else // Default colors
@import "colors.mapcss";
@endif
Guru Maps использует следующие параметры препроцессора:
- Theme {Light, Dark} - текущая тема,
- Style {Default, Outdoor} - текущий стиль карты,
- SubStyle {Car, Hike, Bike}:
- Car используется для навигации на машине,
- Hike и Bike для велосипедного и пешеходного стилей соответственно.
@else
Содержит блок, который надо выполнить если условие ложно.
@elif
Иногда, нужно проверить несколько вариантов условия. Для этого используется блок else if
.
@endif
Закрывает блок текущего условия.
Параметры прорисовки
Параметры управляют отображением объектов на карте. Guru Maps поддерживает следующий набор параметров:
Значения параметров
Толщина
Толщина линий может быть задана в пикселях 1px
, поинтах 2pt
, метрах 3m
или вычислена с помощью выражения eval( zlinear( 13, 1px,1pt,max(2pt, 4m) ) );
. О выражениях, читайте в отдельной секции.
Цвет
Цвет может быть задан следующими форматами: #RGB
, #RRGGBB
, #RRGGBBAA
или константой цвета из списка CSS.
Текст
Текстом считается любая последовательность символов между одиночными или двойными кавычками.
'string'
"another string"
Параметры порядка прорисовки
layer
Номер слоя нужен для разделения разных уровней на карте.
// for any object with tag 'layer', set it's 'layer' property, to the value of 'layer' tag
*|z9-[layer] {
layer: eval(tag(layer));
}
z-index
z-index
устанавливает порядок прорисовки объектов одного типа внутри одного слоя.
area|z10-[natural=wood] {
z-index: -3;
fill-color: @color_wood;
}
area[natural=oceanwater] {
z-index: -2;
fill-color: @color_water;
}
Параметры полигонов
fill-color
Цвет заливки полигона
area|z5-[natural=water] {
fill-color: @color_water;
}
fill-image
Картинка заливки
// fill image of military area desplayed on top of the other objects
area|z11- {
[landuse=military],
[military=danger_area] {
z-index: 2;
fill-image:"forbiddenArea.png";
}
}
fill-image
поддерживает загрузку base64 данных прямо из стиля.
// то же что и arrow.svg
fill-image: eval(data("PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI2IDNoMTBWMWw1IDMtNSAzVjVIMjZ6IiBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii40Ii8+PC9zdmc+Cg=="))