Context Navigation

Editing Help/Styles/Images

Adjust edit area height: Edit side-by-side

[[TranslatedPages]]
= Including images in styles =

== Image-URL ==
There are different ways to reference images in styles:

Build in images:: You can reference the build in images. To browse the available icons, unpack the `josm-*.jar` file with any program that can handle a zip-archive. The image files are located in the `images` subfolder. Omit the first folder in the file path (not `images/presets/food/restaurant.svg`, but `presets/food/restaurant.svg`). Example:
{{{#!mapcss
node[amenity=restaurant] {
    icon-image: "presets/food/restaurant.svg";
}
}}}

Local images:: Provide the path of an image file on the local file system, either absolute or relative to the current `.mapcss` file. Example:
{{{#!mapcss
node[amenity=restaurant] {
    icon-image: "/home/username/osm/my-restaurant.png";
}
}}}
 or
{{{#!mapcss
node[amenity=restaurant] {
    icon-image: "my-restaurant.png";
}
}}}

URL of an image on a remote server:: Full URL of an image from the web. Make sure direct linking is tolerated by the website owner. The images are loaded on demand and cached on the client computer (for one week, usually).
{{{#!mapcss
node {
    icon-image: "https://upload.wikimedia.org/wikipedia/en/9/9d/Commons-logo-31px.png";
}
}}}

Images within a zip-archive:: It is possible to pack your style and all required resources in a zip archive, in order to simplify distribution. When the user loads the zip file as a style, JOSM will automatically detect the `.mapcss` file within the archive and find all the images.
{{{#!mapcss
node {
    icon-image: "image/file/within/archive.png";
}
}}}

Embedded image data:: `data:`-URL according to [http://www.ietf.org/rfc/rfc2397.txt RFC2397]. Examples:
{{{#!mapcss
node {
    icon-image: "data:image/png;base64,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";
}
}}}
 or
{{{#!mapcss
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>";
}
}}}

Images on the OSM-Wiki:: Image files from the OSM-wiki can be linked in a special way. This is supposed to be compatible with the `wiki:symbol`-Tag, see [osmwiki:DE:Hiking DE:Hiking]. Example:
{{{#!mapcss
node {
    icon-image: "wiki://Symbol_Jakobsweg.png";
}
}}}

== Image formats ==
=== Raster formats ===
JOSM can display the following raster formats: `png`, `jpeg`, `gif` and `bmp`. \\
(Basically all formats that are supported by the Java Runtime Environment)

=== Vector formats ===
There is also build-in support for ''scalable vector graphics'' (`svg`). svg icons are preferred over raster format icons because of lossless scaling on hidpi screens. Most `svg`-images should be rendered correctly, but in some cases the result may be flawed. This is due to limitations of the used [https://svgsalamander.java.net/ svg-library].

One thing you can be sure of, is that the rendering is consistent on all systems. So either the result looks OK, or it does not.

In case it does not, try to "simplify" the `svg` in a way that it can be handled by JOSM. See also the svg related hints at [wikitr:/DevelopersGuide/DefaultPresets#NewIcons].

----
Back to [wikitr:/Styles JOSM Map Styles]

Note: See WikiFormatting and TracWiki for help on editing wiki content.

Change information

Your email or username:

E-mail address and name can be saved in the Preferences

Comment about this change (optional):

Note: See TracWiki for help on using the wiki.