Создание базовой карты

[[include component:mapping-source
code=a |
]]

Этот блок импортирует необходимые стили. Его надо добавлять всего один раз.

[[div class="mainmap"]]
[[image https://scpfoundation.net/local--files/fragment:facilities-map/Map-World.png]]

Эта секция начинает карту. Менять здесь можно только вторую строчку.

Вторая строчка объявляет изображение, использующееся в качестве фона основной карты. Просто замените https://scpfoundation.net/local--files/fragment:facilities-map/Map-World.png на URL своего изображения и всё!

[[include component:mapping-source
facility=a |
x=51.5 |
y=21.0 |
image=https://scpfoundation.net/local--files/component:mapping/template-area.png
]]

Этот [[include]] добавляет на карту иконку. Он принимает следующие параметры: facility, x, y и image.

facility указывает, что вы хотите добавить иконку. x это процент, определяющий смещение иконки от верхнего левого угла по горизонтали. y — процент, определяющий смещение иконки от верхнего левого угла по вертикали. И напоследок, image — это URL изображения, которое вы хотите использовать в качестве иконки.

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

[[div class="subtitle"]]
|| Легенда ||
|| [[image https://scpfoundation.net/local--files/component:mapping/template-site.png]] || Зона ||
|| [[image https://scpfoundation.net/local--files/component:mapping/template-area.png]] || Участок ||
[[/div]]

Это панель подписей. Тут всё просто, потому что по своей сути, это таблица.

Замените ссылки на URL используемых вами изображений-обозначений и поменяйте текст между || || на описание этих обозначений. Заголовок панели можно поменять, заменив текст Легенда.

Настройка иконок для отображения текста

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

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

Стандартное обозначение Зоны: https://scpfoundation.net/local--files/component:mapping/template-site.png
Стандартное обозначение Участка: https://scpfoundation.net/local--files/component:mapping/template-area.png

Просто скопируйте нужное вам изображение в параметр image из блока, показанного ранее, и дело сделано. Почти.

Теперь, самая главная часть:

[[include component:mapping-source
facility=a |
x=25 |
y=50 |
image=https://scpfoundation.net/local--files/component:mapping/template-site.png |
textclass=numbermap |
text=XXX |
]]

Этот код создаёт иконку с текстом поверх неё.

Этот [[include]] использует те же параметры, что и обычная иконка, + 3 новых. Правда, среднестатистическому пользователю понадобятся лишь 2 из этих новых параметров.

Этими параметрами являются textclass и text. textclass указывает, какой класс CSS должен использоваться для текста на вашей иконке. Вы можете передать в него значение subtitlemap для аккуратной подписи под иконкой или значение numbermap для отображения текста поверх иконки. text — это сам текст.

Однако, если ваш текст состоит из более чем 3 цифр, вам скорее всего придётся использовать ещё один, третий новый параметр, упомянутый выше.

[[include component:mapping-source
facility=a |
x=25 |
y=50 |
image=https://scpfoundation.net/local--files/component:mapping/template-site.png |
textclass=numbermap |
text=XXX |
font-size=0.3 |
]]

font-size — это пример параметра, который мы будем назвать параметр для разработчиков, он используется для каких-то отдельных случаев или под капотом. Если вы не собираетесь его использовать, его можно убрать, так как по умолчанию он всё равно будет равен 0.3.

Соответственно, font-size определяет размер шрифта.

И напоследок, есть ещё один дополнительный параметр, позволяющий управлять размером вашей иконки:

size=XX |

Просто замените XX на какое-то число. По умолчанию значение этого параметра равно 1.5.

А вот пример использования сразу и size, и subtitlemap:

Добавление дополнительных карт

Если вы открыли этот спойлер, то значит вы хотите добавить вторичные карты в свою карту. Это достаточно просто, если понимать, что делаешь. Так что, с ходу пример:

{$text}

159

Легенда
	Зона
	Участок

Попробуйте навестись на северную Америку и наслаждайтесь её увеличением на весь экран :)

Чтобы создать такую же карту, как и выше, используйте данный код:

[[div class="mainmap"]]
[[image https://scpfoundation.net/local--files/fragment:facilities-map/Map-World.png]]

[[include component:mapping-source
facility=a |
x=51.5 |
y=21.0 |
image=https://scpfoundation.net/local--files/component:mapping/template-area.png |
]]

[[include component:mapping-source-secmap
sx= 22.5|
sy= 35|
x=10|
y=5|
image=https://scpfoundation.net/local--files/fragment:facilities-map/Map-North-America.png|
]]

[[include component:mapping-source
facility=a |
x=25 |
y=50 |
image=https://scpfoundation.net/local--files/component:mapping/template-site.png |
textclass=numbermap |
text=159 |
]]

[[/div]]

[[div class="subtitle"]]
|| Легенда ||
|| [[image https://scpfoundation.net/local--files/component:mapping/template-site.png]] || Зона ||
|| [[image https://scpfoundation.net/local--files/component:mapping/template-area.png]] || Участок ||
[[/div]]

[[/div]]

Для создания непосредственно вторичной карты необходим вот этот кусок:

[[include component:mapping-source-secmap
sx= 22.5|
sy= 35|
x=10|
y=5|
image=https://scpfoundation.net/local--files/fragment:facilities-map/Map-North-America.png|
]]

Перед нами 5 параметров, 3 из которых должны быть вам знакомы из "Основ": x, y и image. Разберёмся с sx и sy.

sx и sy не так просты. Они указывают ширину и высоту прямоугольной зоны, на которую пользователю необходимо навестись для появления вторичной карты. Причём ширина и высота высчитываются относительно размеров основной карты. Чтобы подсветить зону для наведения, можете добавить следующий параметр, и тогда эта зона станет чёрным прямоугольником:

highlighter=a|

x и y, соответственно, описывают горизонтальное и вертикальное смещение вторичной карты относительно верхнего левого угла зоны для наведения. image — это URL вторичной карты.

Не забудьте добавить ещё один [[/div]], закрывающий вторичную карту. В противном случае, всё сломается

По идее, вы можете добавлять сколько угодно вторичных карт.