Включение изображений в стили

Image-URL

Существуют различные способы указать ссылки на изображения в стилях:

Изображения, входящие в состав стиля

Можно сослаться на встроенные в стиль изображения. Для обзора доступных значков распакуйте файл josm-*.jar любой программой, умеющей работать с zip-архивами. Файлы изображений расположены в подпапке images. Пропустите первую папку в пути к файлу (не images/presets/food/restaurant.svg, а presets/food/restaurant.svg). Пример:

node[amenity=restaurant] {
    icon-image: "presets/food/restaurant.svg";
}

Локальные изображения

Укажите путь к файлу изображения в локальной файловой системе, абсолютный или относительный к текущему файлу .mapcss. Пример:

node[amenity=restaurant] {
    icon-image: "/home/username/osm/my-restaurant.png";
}

или

node[amenity=restaurant] {
    icon-image: "my-restaurant.png";
}

URL изображения на удалённом сервере

Полный URL изображения из WWW. Убедитесь, что прямые ссылки разрешены владельцем сервера. Изображения скачиваются по запросу и кэшируются на клиентском компьютере (обычно в течение одной недели).

node {
    icon-image: "https://upload.wikimedia.org/wikipedia/en/9/9d/Commons-logo-31px.png";
}

Изображения внутри zip-архива

Вы можете упаковать свой стиль и все требуемые ресурсы в zip-архив, чтобы упростить распространение стиля. Когда пользователь скачивает zip-файл стиля, JOSM автоматически обнаруживает файл .mapcss внутри архива и находит все изображения.

node {
    icon-image: "image/file/within/archive.png";
}

Изображения, встроенные в URL

data:-URL в соответствии с ​RFC2397. Пример:

node {
    icon-image: "data:image/png;base64,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";
}

или

node {
    icon-image: "data:image/svg+xml,<svg><rect x='10' y='10' width='50' height='20' fill='white' stroke='blue' stroke-width='2px'/><line x1='18' y1='37' x2='50' y2='5' stroke='black' stroke-width='1.5px'/></svg>";
}

Изображения в OSM-Wiki

Ссылки на файлы изображений из OSM-wiki создаются особым способом. Они должны быть совместимы с тегом wiki:symbol, см. ​DE:Hiking. Пример:

node {
    icon-image: "wiki://Symbol_Jakobsweg.png";
}

Форматы изображений

Растровые форматы

JOSM умеет отображать следующие растровые форматы: png, jpeg, gif и bmp.
(В основном, все форматы, которые поддерживаются в Java Runtime Environment v. 6)

Векторные форматы

Имеется также встроенная поддержка формата «scalable vector graphics» (svg). Значки svg предпочтительнее растрового формата, так как они масштабируются без потерь на HiDPI-экранах. Большинство svg-изображений должно отрисовываться правильно, но в некоторых случаях могут быть дефекты из-за ограничений используемой ​svg-библиотеки.

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

Если нет, попробуйте "упростить" svg так, как он обрабатывается в JOSM. Смотрите также советы, касающиеся svg, в DevelopersGuide/DefaultPresets