Создание кастомной карточки

Предварительный текст

Данный пример является предварительным и будет заменен в будущем

Ошибка при создании

По техническим причинам при написании примера пришлось пересоздать слой. Слои Транспорт Твери и Транспорт Твери 2 полностью идентичны

Исходные данные

Исходные данные

Исходные данные лежат в gpkg Tver_upd.gpkg Все тестовые слои и картинки находятся в папке “Тест символизации”. Карта “Тест символизации 3” (системное имя eromakh.fvpmmx83gda8)

Обратите внимание!

Карточки объектов и все, что находится в них, находятся в конфигурации слоя, а не конфигурации карты. Добавьте симлинк на слой в инструментах разработчика и нажмите на него. Так вы откроете действующую конфигурацию слоя

В этом примере мы разберем создание кастомных карточек. Мы добавим разделы, настроим оформление текста, а также создадим текст с цветными плашками. Исходные данные включают в себя один слой: eromakh.tver_transport2. В нем предварительно подготовлены все необходимые поля:

В таблице поля и столбцы поменяны местами для удобства чтения данных

Столбец	Пример данных 1	Пример данных 2
osm_id (Python: int)	984529760	10277917872
code (Python: str)	5621	5621
fclass (Python: str)	bus_stop	bus_stop
name (Python: str)	Площадь Михаила Тверского	Красное знамя
voronoi_area (Python: float)	197081,19	99620,37
voronoi_count (Python: int)	128	22
buildings_700m (Python: int)	602	229
poi_count (Python: int)	461	0
poi_type (Python: str)	Очень много	Нет
color (Python: str)	‘#33CC00'	'#FF3300’
near_industrial (Python: str)	Нет	Нет
near_kindergarten (Python: str)	Да	Нет
near_residential (Python: str)	Нет	Нет
near_school (Python: str)	Да	Нет
Geometry (EverGIS geometry types | Point)	Point	Point
gid (Python: int)	1	2

Не забудьте создать и сохранить карту!

Для работы с конфигурацией Вам нужно создать и сохранить карту. Если не уверены в том, как это сделать, обратитесь к соответствующему разделу

Мы создадим три раздела, которые будут включать в себя название, иконку, а также выбранные нами атрибуты. Мы вынесем один атрибут из разделов и покажем его отдельно. В рамках примера мы пошагово разберем работу с конфигурацией слоя. Создание диаграмм и инструментов и их использование в карточке мы рассмотрим в последующих примерах.

Карточка по умолчанию

По умолчанию в системе карточки создаются с данными, которые есть в таблице атрибутов. У них есть дефолтная иконка, которая настраивается через контекстное меню настроек оформления, а также gid как подпись объекта. Все это можно изменить, более того, в карточку можно добавлять инструменты, диаграммы, а также полностью изменить оформление иконок, подписей и данных в них.

По умолчанию карточка объекта выглядит так:

Изменение заголовка карточки

Не забывайте сохранять конфигурацию

Не забывайте нажимать кнопку сохранения, чтобы применить изменения. Если вы не видите никаких изменений – перезагрузите страницу

Для того, чтобы изменить заголовок у карточки, зайдите в конфигурацию слоя и в нем найдите элемент cardConfiguration. Внутри элемента header есть список элементов children, в котором есть элемент attributeName. По умолчанию его значение равно gid – система подставляет уникальный идентификатор в название.

Система позволяет применять другие названия. Например, можно использовать другой атрибут. В OSM есть атрибут name, если вместо “attributeName”: “gid” Написать “attributeName”: “name”

То в заголовке карточки будет отображаться значение атрибута name для объекта. Для того, чтобы применить изменения, нужно также заменить параметр “templateName”: “Default” на “templateName”: “Background”

Тогда в названии карточки gid поменяется на название объекта:

Изменение подписи заголовка карточки

Не забывайте сохранять конфигурацию

Не забывайте нажимать кнопку сохранения, чтобы применить изменения. Если вы не видите никаких изменений – перезагрузите страницу

Однако изменение параметра templateName привело также к изменению подписи под слоем. В дефолтной карточке подпись соответствует названию слоя. При изменении значения параметра на Background подпись меняется на системное имя слоя. В случае со слоем Транспорт Твери произошло изменение: Транспорт Твери -> eromakh.tver_transport. Для того, чтобы вновь отобразилось правильное название, нам необходимо поменять следующую часть конфигурации под названием (блок с "id": "description").

Мы можем изменить его тремя способами:

1. Можно изменить конфигурацию так, чтобы он показывал в подписи значение атрибута
2. Можно установить значение по умолчанию
3. Можно удалить параметр "type", тогда вновь будет показываться псевдоним слоя

Для того, чтобы показывать значение атрибута в подписи, просто скопируем значения параметров type и attributeName из заголовка и изменим значение attributeName. У данных OSM из geofabrik есть атрибут fcalss по которому будет отображаться подпись карточки:

Показать фрагмент конфигурации

{
	"id": "description",
	 "type": "attributeValue"
	 "attributeName": "fclass"
}

Для того, чтобы установить статичную надпись нужно несколько изменить атрибут type и вместо атрибута attributeName добавить атрибут value:

Показать фрагмент конфигурации

{
	"id": "description",
	 "type": "text"
	 "value": "Остановка общественного транспорта"
}

Изменение фона карточки

Не забывайте сохранять конфигурацию

Не забывайте нажимать кнопку сохранения, чтобы применить изменения. Если вы не видите никаких изменений – перезагрузите страницу

За цвет подписи карточки отвечает параметр bgColor. По умолчанию система задает градиент, например:

"bgColor": "linear-gradient(94deg, rgba(255, 241, 216, 0.80) 0%, rgba(174, 115, 234, 0.80) 100%)"

Для того, чтобы изменить фон карточки нужно добавить новый элемент под блоком кода конфигурации из предыдущего раздела:

"id": "bgImage"

Для начала нужно найти и загрузить картинку в ЭверГИС. После того, как вы загрузите картинку, добавьте симлинк на папку с картинкой в инструментах разработчика. Перейдите в эту папку и нажмите на контекстное меню картинки, и в ней Копировать ID ресурса:

Далее вставьте его в конфигурацию:

Как мы видим темный текст на темной картинке не виден. Для того, чтобы исправить это можно изменить цвет текста, либо подкорректировать прозрачность и цвет градиента в блоке “header”. Мы пойдем первым путем и изменим цвет текста. Для этого нужно добавить параметр fontColor в блок options у блока header:

Система использует стандартные HTML HEX коды цвета. Можно задать любой цвет для лучшей читаемости текста. В дальнейшем мы будем дорабатывать карточку объекта, поэтому мы установим значение прозрачности в явном виде. Для этого изменим значения rgba в линейном градиенте с

linear-gradient(94deg, rgba(255, 241, 216, 0.80) 0%, rgba(174, 115, 234, 0.80) 100%)

на:

linear-gradient(94deg, rgba(255, 241, 216, 0.00) 0%, rgba(174, 115, 234, 0.00) 100%)

Цвет

Градиент не обязательно будет иметь те же параметры, приведенные в примере. Также цвет может быть задан статично, при помощи HEX кода. Ваша задача в этом примере – сделать его прозрачным. Однако при помощи манипуляции с градиентом вы можете изменить фон картинки, иногда это полезно, когда надо увеличить читаемость текста

После применения всех изменений блок header внутри cardConfiguration выглядит так:

Показать фрагмент конфигурации

"header": {
	"options": {
		"bgColor": "linear-gradient(94deg, rgba(255, 241, 216, 0.00) 0%, rgba(174, 115, 234, 0.00) 100%)",
		"fontColor": "#ffffff",
		"withPadding": false
	},
	"children": [
	{
		"id": "title",
		"type": "attributeValue",
		"attributeName": "name"
	},
	{
		"id": "description",
		"type": "attributeValue",
		"attributeName": "fclass"
	},
	{
		"id": "bgImage",
		"type": "image",
		"value": "c296b1b24c8e48159668e63f8f43e72c"
	}
	],
	"templateName": "Background"
}

Создание разделов внутри карточки

Следующим шагом мы создадим элементы внутри карточки. В этом параграфе дана пошаговая инструкция для создания одного раздела с выбранными атрибутами. Всего наша карточка будет иметь три раздела (второй раздел, третий раздел) и один атрибут, не относящийся ни к какому из разделов. В этом разделе мы приведем данные, которые находятся в стандартной поставке OSM от geofabrik. В этом разделе будут отображаться следующие атрибуты:

• osm_id
• code
• fclass
• name

Error

По техническим причинам далее используется слой с названием Транспорт Твери 2, а также с измененным системным именем. Он абсолютно идентичен предыдущему

Для редактирования разделов в карточке необходимо добавлять или удалять объекты среди списка children внутри объекта страницы (в нашем случае “id”: “page1”).

Обратите внимание

В системе есть два похожих объекта с элементом “id”: “page1”. Один из них находится внутри объекта cardConfiguration, а другой в editConfiguration. В рамках этого раздела мы всегда редактируем ТОЛЬКО cardConfiguration

В дефолтном оформлении карточки показываются все атрибуты и их системные названия. За это отвечает следующий фрагмент конфигурации:

По умолчанию код конфигурации, отвечающий за отображение атрибутов слоя в карточке выглядит так:

Показать фрагмент конфигурации

{
	"id": "attributes",
	"options": {},
	"children": [
		{
			"id": "data",
			"options": {
				"hideEmpty": false,
				"attributes": [],
				"useProjectHiddenAttributes": true
			},
			"children": [
				{
					"id": "alias",
					"type": "attributeAlias"
				},
				{
					"id": "value",
					"type": "attributeValue",
					"options": {
						"maxLength": 200,
						"expandable": true
					}
				}
			],
			"templateName": "OneColumn"
		}
	],
	"templateName": "ContainersGroup"
}
 

Как мы видим в этой конфигурации используются все атрибуты ("attributes": []), и они все используют алиасы. При загрузке данных мы не задавали их, поэтому псевдоним в этом примере равен системному названию. Если вы зададите алиасы, то они автоматически заменят системные названия в карточке. Мы сделаем это после подготовки разделов.

Одним из ключевых параметров является "templateName": "OneColumn", он отвечает за подписи вида название атрибута в верхней строке, значение в нижней строке. Мы изменим его на TwoColumn для того, чтобы в левой колонке были названия атрибутов, а в правой – значения.

Добавление возможности скрыть или раскрыть раздел

Перейдем к редактированию конфигурации. Во-первых, мы хотим, чтобы данные в разделе можно было сворачивать и разворачивать. Добавим в блок options два новых параметра:

"expanded": true,
"expandable": true

На данном этапе никаких видимых изменений нет, но они появятся чуть позже. Также переименуем элемент id. Название может состоять из латиницы без пробелов. Изначально блок id выглядел так:

"id": "attributes",
	"options": {}

Теперь он будет выглядеть так:

"id": "info_data",
"options": {
	"expanded": true,
	"expandable": true
}

Добавление названия раздела

Теперь добавим описание первого раздела. Все блоки описания находятся в списке children объекта id. Добавим к нашему разделу новый блок, который будет отвечать за название:

{
	"id": "title",
	"type": "text",
	"value": "Информация об остановке"
}

Как мы видим, у объекта появился заголовок, а также элемент для того, чтобы скрыть или развернуть текст.

Возможный баг

Будьте внимательны, если вы скроете раздел, когда он один, есть вероятность столкнуться с багом, при котором кнопка раскрытия не появится. В таком случае для того, чтобы раскрыть раздел нужно будет перезагрузить страницу. Перед перезагрузкой убедитесь, что у симлинка нет голубого кружка – если он есть, сохраните изменения перед перезагрузкой страницы!

Добавление иконки раздела

Давайте добавим иконку нашему разделу. Предварительно ее нужно скачать из интернета и загрузить в каталог системы. Лучше всего если иконка будет сделана в форматах svg или png. Для этого под объектом заголовка добавим объект titleIcon. Предварительно необходимо получить идентификатор объекта. Для этого нужно добавить симлинк на картинку и выбрать Копировать ID ресурса. Этот шаг описан в разделе с фоном карточки. Конфигурация для добавления иконки (если иконка сделана в формате svg):

{
	"id": "titleIcon",
	"type": "svg",
	"value": "1dc091eaf1704b36a0004b86c06f00fa",
	"options": {
		"width": 16,
		"fontColor": "#FF7E25"
	}
}

Конфигурация в случае, если картинка выполнена в формате png или jpg. Обратите внимание на то, что цвет иконки в данных форматах нельзя изменить – он закодирован в растре картинки:

{
	"id": "titleIcon",
	"type": "image",
	"value": "1dc091eaf1704b36a0004b86c06f00fa",
	"options": {
		"width": 16
	}
}

Выравнивание иконки

Иногда добавление иконка может иметь слишком большой размер по одной из осей. Если вы видите, что в конфигурации появилось очень много места у заголовка, то дополнительно к параметру width добавьте параметр height и укажите в нем размер иконки в пикселях

Не забывайте, что ID ресурса у всех отличаются. Если вы просто скопируете ID из этой инструкции, то у вас скорее всего иконка не отобразится. Если все пройдет успешно, то вы увидите иконку слева от заголовка:

Выбор атрибутов для отображения в разделе

Следующим шагом разделим атрибуты на категории и исключим ненужные из списка. В исходной конфигурации список атрибутов пуст – это значит что в разделе будут отображаться все атрибуты. Мы же хотим, чтобы в этом разделе отображались лишь выбранные нами атрибуты. Для этого добавим их в список блока options. Было:

"options": {
	"hideEmpty": false,
	"attributes": [],
	"useProjectHiddenAttributes": true
}

Стало:

"options": {
	"hideEmpty": false,
	"attributes": [
		"osm_id",
		"code",
		"fclass",
		"name"
	],
	"useProjectHiddenAttributes": true
}

Теперь в нашем разделе отображаются только те атрибуты, которые перечислены в списке:

Стилизация представления данных в разделе

Далее изменим представление карточки со списка на таблицу из двух колонок. Для этого изменим значение атрибута "templateName": "OneColumn" на "templateName": "TwoColumn". Это приведет к разделению названия атрибута и значения на две части – слева будет название, справа – значение.

Как мы видим таблица теперь действительно состоит из двух значений, однако необходимо подкорректировать шрифты. Для этого в элементе “id”: “value” добавим новый блок style. При помощи параметров в этом блоке можно влиять на стиль текста. Его можно добавить также и к “id”: “alias”, однако мы в этом примере этого делать не будем. Стилизация позволяет настроить размер блока с текстом (“width”, в пикселях), размер шрифта (“fontSize”), а также расстояние между строками (“marginBottom”, значение также указываются в в пикселях), “fontWeight” – насыщенность цвета шрифта и его толщина (числовые значения от 0 до 1000, где 0 это очень тонкая линия, 500 – обычное начертание, 1000 – жирное начертание). Также вы можете добавить и другие объекты, например, “alignText” – выравнивание текста.

"style": {
	"width": 180,
	"fontSize": 14,
	"fontWeight": "1000",
	"marginBottom": 8
}

Также обратите внимание на блок “options” у “id”: “value”. Если у вас очень большой текст, например описание чего либо, то возможно вам будет необходимо увеличить значение параметра “maxLength”.

Итоговая конфигурация раздела с атрибутами:

Показать фрагмент конфигурации

{
	"id": "info_data",
	"options": {
		"expanded": true,
		"expandable": true
	},
	"children": [
		{
			"id": "title",
			"type": "text",
			"value": "Информация об остановке"
		},
		{
			"id": "titleIcon",
			"type": "image",
			"value": "1dc091eaf1704b36a0004b86c06f00fa",
			"options": {
			"width": 16
			}
		},
		{
			"id": "data",
			"options": {
				"hideEmpty": false,
				"attributes": [
					"osm_id",
					"code",
					"fclass",
					"name"
				],
				"useProjectHiddenAttributes": true
			},
			"children": [
				{
					"id": "alias",
					"type": "attributeAlias"
				},
				{
				"id": "value",
				"type": "attributeValue",
				"style": {
					"width": 180,
					"fontSize": 14,
					"fontWeight": "1000",
					"marginBottom": 8
				},
				"options": {
					"maxLength": 200,
					"expandable": true
					}
				}
			],
			"templateName": "TwoColumn"
		}
	],
	"templateName": "ContainersGroup"
}

Специальный атрибут

В слое есть атрибут poi_type, который мы не включили ни в один из разделов. Он имеет пять возможных значений:

• Нет
• Мало
• Средне
• Много
• Очень много Технически он отображает классифицированное количество объектов из слоя точки интереса, которые находятся в 250-метровом буфере вокруг остановок. Его можно отобразить при помощи специальной плашки, которая будет иметь разный цвет в зависимости от числа объектов. Для того, чтобы добавить его в карточку необходимо добавить еще один объект в список children элемента “id”: “page1”.

Цвет

Для того, чтобы сделать отображение цветным, необходимо предварительно задать каждому объекту слоя атрибут с HEX кодом. В данном примере у каждого объекта слоя Транспорт Твери 2 есть атрибут color, в котором записан отображаемый HEX код

Порядок объектов в списке children определяет порядок их появления в карточке

Технически такой атрибут практически ничем не отличается от раздела, который мы конфигурировали ранее. Объект также должен содержать три элемента: идентификатор id, список дочерних объектов children, а также параметр шаблона templateName, в котором мы укажем количество колонок. Итоговая конфигурация выглядит следующим образом :

Показать фрагмент конфигурации

{
	"id": "poi_type",
	"style": {
		"marginTop": "8px"
		},
	"children": [
		{
			"id": "alias",
			"type": "attributeAlias",
			"style": {
				"width": 200,
				"fontSize": 14,
				"fontWeight": "400"
				},
			"attributeName": "poi_type"
		},
		{
			"id": "value",
			"type": "tags",
			"options": {
				"bgColor": "#00c2ff",
				"fontSize": "0.75rem",
				"fontColor": "#191970",
				"separator": "",
				"colorAttribute": "color"
			},
			"attributeName": "poi_type"
		}
	],
	"templateName": "TwoColumn"
}

Ключевым различием является параметр "type": "tags". В отличие от обычных атрибутов раздела, у которых этот параметр имеет значение "type": "attributeValue", значение tags задает отрисовку в виде плашек. Другие важные атрибуты:

• “colorAttribute”, в котором нужно указать атрибут с HEX кодом цвета для плашки. Кратко пробежимся по наиболее важным атрибутам:
• “bgColor” отвечает за цвет, в случае если “colorAttribute” не имеет значения. Например, вы создали новый объект в системе, и не задали ему цвет в виде HEX кода. В таком случае он будет иметь цвет, указанный по умолчанию в этом атрибуте
• “fontColor” – отвечает за цвет текста на плашке. Также является HEX кодом

Разные атрибуты

Атрибуты attributeName и colorAttribute в норме не должны совпадать. Не забывайте, что HEX код начинается со знака #

Классификация

Данный параметр никак не зависит от классификации по атрибуту, который задается в настройках оформления или при помощи “clientStyle”. Вы можете сделать любое оформление и любые цвета плашек в тегах

Второй раздел в карточке

Второй раздел в карточке будет включать в себя информацию об окружении остановки. В нем будут следующие атрибуты:

• voronoi_area
• voronoi_count
• buildings_700m
• poi_count Конфигурация будет выглядеть практически также с поправкой на названия атрибутов и то, что иконка будет загружена в виде svg файла, а не png. Для того, чтобы второй раздел появился на карте, добавьте уже знакомые нам три объекта id, children и templateName под объект первого раздела.

ID

Не забывайте, что у всех объектов в списке children страницы должны быть разные значения параметра id

Конфигурация второго раздела:

Показать фрагмент конфигурации

{
	"id": "stop_surroundings",
	"options": {
		"expanded": true,
		"expandable": true
	},
	"children": [
		{
			"id": "title",
			"type": "text",
			"value": "Информация об окружении остановки"
		},
		{
			"id": "titleIcon",
			"type": "svg",
			"value": "da901842fb0941baa29e4bd3875ff822",
			"options": {
			"width": 16
			}
		},
		{
			"id": "data",
			"options": {
				"hideEmpty": false,
				"attributes": [
					"voronoi_area",
					"voronoi_count",
					"buildings_700m",
					"poi_count"
				],
				"useProjectHiddenAttributes": true
			},
			"children": [
				{
					"id": "alias",
					"type": "attributeAlias"
				},
				{
					"id": "value",
					"type": "attributeValue",
					"style": {
						"width": 100,
						"fontSize": 14,
						"fontWeight": "1000",
						"marginTop": 20,
						"marginBottom": 20
					},
					"options": {
						"maxLength": 200,
						"expandable": true
					}
				}
			],
		"templateName": "TwoColumn"
		}
	],
	"templateName": "ContainersGroup"
}

После применения конфигурации карточка примет следующий вид:

Псевдонимы (aliases) имен в карточке и единицы измерения

Данная карточка имеет несколько недостатков оформления. Во-первых, атрибуты названы по системному имени, а не по их реальному названию. Во-вторых, площадь показана без единиц измерения. Для того, чтобы исправить данные недоработки необходимо вернутся к свойствам слоя. Это можно сделать как при помощи интерфейса, так и при помощи конфигурации слоя.

В конфигурации слоя есть детальное описание всех атрибутов. Например, для атрибута poi_type оно будет следующим:

Показать фрагмент конфигурации

{
	"attributeConfigurationType": "String",
	"subType": "None",
	"type": "String",
	"attributeName": "poi_type",
	"columnName": "poi_type",
	"alias": null,
	"description": null,
	"isEditable": true,
	"isDisplayed": true,
	"clientData": null,
	"referenceId": null,
	"layerReferenceId": null,
	"attributeSelectorType": "None",
	"stringFormat": null,
	"icon": null
}

Для того, чтобы в карточке начало отображаться не системное имя, а то, которое мы хотим сами задать, необходимо отредактировать параметр alias. Значения этого параметра задаются обычной строкой:

Показать фрагмент конфигурации

{
	"attributeConfigurationType": "String",
	"subType": "None",
	"type": "String",
	"attributeName": "poi_type",
	"columnName": "poi_type",
	"alias": "Количество точек интереса в радиусе 250 метров от остановки",
	"description": null,
	"isEditable": true,
	"isDisplayed": true,
	"clientData": null,
	"referenceId": null,
	"layerReferenceId": null,
	"attributeSelectorType": "None",
	"stringFormat": null,
	"icon": null
}

Теперь в карточке отображается не название параметра, а его псевдоним:

По такому же принципу необходимо изменить все атрибуты, кроме gid и Geometry. Они являются системными, и не нужны в карточке. После применения изменений карточка примет следующий вид:

Выравнивание

Не забывайте, что вам необходимо выравнивать псевдоним и его значение. Используйте для этого marginBottom и marginTop в конфигурации объекта раздела. Установите одинаковые значения параметров для того, чтобы названия не съехали относительно значений

Последним штрихом мы добавим единицы измерения. Это можно сделать как редактируя конфигурацию, так и редактируя свойства атрибутов через контекстное меню слоя. Для того, чтобы отредактировать его через конфигурацию нам нужно внести изменения в параметр stringFormat. Добавим подпись м^2 к атрибуту voronoi_area, округлим значения до целых, а также выделим разряды пробелами. Для этого нам нужно добавить дополнительный блок вместо null и указать в нем три новых параметра: rounding, splitDigitGroup и unitsLabel. Остальные параметры система задаст автоматически со значениями по умолчанию:

Показать фрагмент конфигурации

{
	"attributeConfigurationType": "Default",
	"type": "Double",
	"attributeName": "voronoi_area",
	"columnName": "voronoi_area",
	"alias": "Площадь зоны обслуживания остановки",
	"description": null,
	"isEditable": true,
	"isDisplayed": true,
	"clientData": null,
	"referenceId": null,
	"layerReferenceId": null,
	"attributeSelectorType": "None",
	"stringFormat": {
		"scalingFactor": 0,
		"unitsLabel": "м²",
		"format": null,
		"culture": null,
		"splitDigitGroup": true,
		"rounding": 0
	},
	"icon": null
}

В итоге карточка будет выглядеть так:

Другие знаки

Вы также можете добавлять разные символы в параметр unitsLabel. Это может быть знак валюты, объема, площади или просто любая подпись. Она будет видна справа от значения атрибута в каждой карточке

Создание цветной таблицы

Текст в карточке может быть представлен в виде подсвеченных табличных данных. По умолчанию фон ячеек в таблице является прозрачным, а текст имеет черный цвет. Эти параметры также можно настроить. В таком случае текст в карточке и фон будут иметь цвет, заданный в таблице атрибутов.

Исходный слой имеет четыре дополнительных атрибута:

• near_industrial
• near_kindergarten
• near_residential
• near_school Каждый из этих атрибутов отвечает за наличие соответствующего названию объекта в радиусе 700 метров от остановки. Все эти атрибуты имеют два значения – Да или Нет. Мы можем задать цветовые значения этим атрибутам. Однако сначала нужно преобразовать данные.

Исходная таблица имеет следующий вид:

id	…	near_industrial	near_kindergarten	near_residential	near_school
0	…	Да	Нет	Да	Да
1	…	Нет	Да	Да	Нет

Однако он не подходит для использования в данной схеме. Каждый из атрибутов имеет свой цвет в зависимости от значения. Для этого нужно преобразовать таблицу так, чтобы у каждого элемента было значение цвета. В случае отсутствия объекта рядом с остановкой мы зададим плашке светло-серый цвет (#C7C7C7), если же что-то находится рядом с остановкой, то мы используем зеленый цвет (#66CC00):

id	name	value	color
0	near_industrial	Да	#66CC00
0	near_kindergarten	Нет	#C7C7C7
0	near_residential	Да	#66CC00
0	near_school	Да	#66CC00
1	near_industrial	Нет	#C7C7C7
1	near_kindergarten	Да	#66CC00
1	near_residential	Да	#66CC00
1	near_school	Нет	#C7C7C7

Количество цветов

В данном примере используется бинарное деление (присутствие или отсутствие объекта в радиусе 700 метров), однако ничего не мешает задать более сложные многоцветные шкалы

Для того, чтобы привести таблицу атрибутов к такому виду потребуется использовать EQL запрос. Для этого в главном меню карты переходим в раздел EQL и там создаем запрос к исходному слою.

Для составления запроса нам потребуются следующие операторы SQL:

• row_number() – задает число строк
• OVER() – нужен для выполнения операций на множестве строк исходной таблицы
• COALESCE() – нужен для того, чтобы задать значение по умолчанию для пропущенных значений
• unnest() – вставляет строку в таблицу со значениями, заданными пользователем

Для правильной работы нам потребуется задать пять столбцов:

• gid – уникальный идентификатор объекта в производной таблице
• gid_src – gid объекта из исходного набора данных
• name – название характеристики
• value – значение Да/Нет
• color – цветовой код

Итоговый запрос будет выглядеть следующим образом:

SELECT
	row_number() OVER () AS gid,
	gid AS src_gid,
	unnest(ARRAY['Промышленность','Жилая застройка','Детский сад','Школа']) AS name,
	unnest(ARRAY[
		COALESCE(near_industrial, 'Нет'),
		COALESCE(near_residential, 'Нет'),
		COALESCE(near_kindergarten, 'Нет'),
		COALESCE(near_school, 'Нет')
	]) AS value,
	unnest(ARRAY[
		CASE WHEN near_industrial = 'Да' THEN '#66CC00' ELSE '#C7C7C7' END,
		CASE WHEN near_residential = 'Да' THEN '#66CC00' ELSE '#C7C7C7' END,
		CASE WHEN near_kindergarten = 'Да' THEN '#66CC00' ELSE '#C7C7C7' END,
		CASE WHEN near_school = 'Да' THEN '#66CC00' ELSE '#C7C7C7' END
	]) AS color
FROM eromakh.tver_transport2

После того, как напишете запрос к своему слою – сохраните его как отдельный слой. Убедитесь, что тип запроса – выборка. Далее нажмите на кнопку сохранения и выберите Сохранить как слой.

После сохранения в списке ресурсов страницы вы увидите новый тип ресурса – источник данных, в котором будет слой с агрегированными данными.

Теперь можно объединить производную таблицу и исходный слой. Для этого перейдем в конфигурацию исходного слоя (Транспорт Твери 2) и найдем в ней параметр dataSources. По умолчанию он пустой, однако нам нужно добавить в него данные о производном слое. Для этого вставим в этот список новый объект. Он должен иметь три параметра:

• name – название объекта, которое будет использоваться в других местах конфигурации. Может быть на кириллице и содержать пробелы
• condition – выражение, при помощи которого мы найдем соответствие между исходным слоем и производным. Именно поэтому при создании слоя мы сохранили gid исходного слоя, он потребуется нам для создания связи один к одному. Для того, чтобы создать связь нам нужно выражение WHERE src_gid={gid}. В своих проектах вы можете использовать и другие уникальные атрибуты для создания связей между слоями. Запомните, что они создаются через конструкцию WHERE атрибут в производном слое = {атрибут в исходном слое}
• layerName – системное имя производного слоя

В итоге фрагмент конфигурации будет выглядеть следующим образом:

"dataSources": [
	{
		"name": "PivotData",
		"condition": "WHERE src_gid={gid}",
		"layerName": "eromakh.tver_supplementary"
	}
]

Далее добавим эти данные в раздел, в котором находится цветная плашка с количеством точек интереса в радиусе 250 метров от остановки. Мы создавали ее в одном из предыдущих разделов. Для этого под этой плашкой создадим еще один объект с “id”: “static_info_container” (он может быть любым, это не принципиально) и добавим в него следующие элементы:

• style – отвечает за группировку элементов на карточке
• options – отвечает за особенности внутреннего содержимого каждой плашки
• children – здесь будут располагаться уже знакомые нам по предыдущим разделам данные о названии атрибутах и значении
• templateName – системный параметр, который определяет шаблон конструкции в конфигурации

Показать фрагмент конфигурации

{
	"id": "static_info_container",
	"style": {},
	"options": {},
	"children": [
		{
			"id": "alias",
			...
		},
		{
			"id": "value",
			...,
			"attributeName": "value"
		},
		"templateName": "DataSource"
	]
}

Теперь рассмотрим каждый из этих элементов подробнее. Элемент style имеет лишь один необходимый нам параметр – “flexWrap”. Он нужен для того, чтобы наши цветные плашки переносились на следующую строку. Для этого установим ему значение “wrap”. Без этого они выстроятся в одну строку.

"style": {
	flexWrap: "wrap"
}

Элемент options имеет множество параметров:

• center – отвечает за центрирование подписи атрибута в плашке
• column – отвечает за стиль расположения объектов, true – все плашки выстроятся в колонну, false – в строку
• hideEmpty – скрывает атрибуты, не имеющие значения у данного объекта
• maxLength – максимальная длина подписи в символах
• colorAttribute – название атрибута, в котором закодирован HEX код цвета из производной таблицы
• innerTemplateName – вид шаблона объекта
• relatedDataSource – название слоя, из которого берутся данные. В данном случае это не системное имя производного слоя, а значение атрибута name из dataSources
• innerTemplateStyle – отвечает за расстояние между цветными плашками

Для создания плашек мы зададим следующие значения:

"options": {
	"center": true,
	"column": false,
	"hideEmpty": true,
	"maxLength-": 40,
	"colorAttribute": "color",
	"innerTemplateName": "RoundedBackground",
	"relatedDataSource": "PivotData",
	"innerTemplateStyle": {
		"margin": "2px 2px 2px 2px",
		"borderRadius": "8px"
	}
}

Названия атрибутов

Внимательно сверяйте названия атрибутов в производной таблице и в конфигурации. Они должны совпадать

В списке children используются те же значения, что и при создании объектов в предыдущих разделах. Сразу приведем структуру:

Показать фрагмент конфигурации

"children": [
	{
		"id": "alias",
		"type": "attributeValue",
		"style": {
			"fontSize": 12
		},
		"attributeName": "name"
	},
	{
		"id": "value",
		"type": "attributeValue",
		"style": {
			"color": "#11252F",
			"fontSize": 20,
			"marginTop": 4,
			"textAlign": "center",
			"alignItems": "center",
			"fontWeight": 500
		},
		"attributeName": "value"
	}
]

Единственное различие в атрибуте color. Так как мы задавали цвета в производной таблице, то если его не указать, то система подставит в карточку более насыщенный аналог указанного цвета в качестве цвета значения атрибута. Для того, чтобы избежать этого и поддерживать единообразную цветовую схему подписей можно задать цвет текста через параметр color.

Также как и у остальных элементов данный объект имеет системный параметр “templateName”, который в случае с использованием внешнего источника данных называется DataSource.

Также добавим заголовок и иконку раздела. Это делается также, как и в предыдущих примерах инструкции. Итоговая версия фрагмента конфигурации выглядит так:

Показать фрагмент конфигурации

{
	"id": "static_info_container",
	"style": {
		"flexWrap": "wrap"
	},
	"options": {
		"center": true,
		"column": false,
		"hideEmpty": true,
		"maxLength": 40,
		"inlineUnits": false,
		"colorAttribute": "color",
		"innerTemplateName": "RoundedBackground",
		"relatedDataSource": "PivotData",
		"innerTemplateStyle": {
			"margin": "2px 2px 2px 2px",
			"borderRadius": "8px"
		}
	},
	"children": [
		{
			"id": "alias",
			"type": "attributeValue",
			"style": {
				"fontSize": 12
			},
			"attributeName": "name"
		},
		{
			"id": "value",
			"type": "attributeValue",
			"style": {
				"color": "#11252F",
				"fontSize": 20,
				"marginTop": 4,
				"textAlign": "center",
				"alignItems": "center",
				"fontWeight": 500
			},
			"attributeName": "value"
		}
	],
	"templateName": "DataSource"
}

Теперь создадим объект под данными о количестве точек интереса в радиусе 250 метров от остановки и скопируем код конфигурации в него. Не забудьте поставить запятую в случае, если у вас там есть дополнительные объекты (в этом примере запятая потребуется).

Всю конфигурацию целиком вы можете посмотреть в слое Транспорт Твери 2 (eromakh.tver_transport2). Итоговый вид карточки: