Changes between Initial Version and Version 1 of Help/Styles/Images


Ignore:
Timestamp:
2013-03-27T22:35:14+01:00 (13 years ago)
Author:
bastiK
Comment:

documentation on including images in styles

Legend:

Unmodified
Added
Removed
Modified

  • Help/Styles/Images

    v1 v1  
     1= Including images in styles =
     2
     3== Image-URL ==
     4There are different ways to reference images in styles:
     5
     6 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/icons/restaurant.png`, but `icons/restaurant.png`). Example:
     7{{{#!mapcss
     8node[amenity=restaurant] {
     9    icon-image: "icons/restaurant.png";
     10}
     11}}}
     12 Local images:: Provide the path of an image file on the local file system, either absolute or relative to the current `.mapcss` file. Example:
     13{{{#!mapcss
     14node[amenity=restaurant] {
     15    icon-image: "/home/username/osm/my-restaurant.png";
     16}
     17}}}
     18 or
     19{{{#!mapcss
     20node[amenity=restaurant] {
     21    icon-image: "my-restaurant.png";
     22}
     23}}}
     24 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).
     25{{{#!mapcss
     26node {
     27    icon-image: "http://upload.wikimedia.org/wikipedia/en/9/9d/Commons-logo-31px.png";
     28}
     29}}}
     30 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.
     31{{{#!mapcss
     32node {
     33    icon-image: "image/file/within/archive.png";
     34}
     35}}}
     36 Embedded image data:: `data:`-URL according to [http://www.ietf.org/rfc/rfc2397.txt RFC2397]. Examples:
     37{{{#!mapcss
     38node {
     39    icon-image: "data:image/png;base64,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";
     40}
     41}}}
     42 or
     43{{{#!mapcss
     44node {
     45    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>";
     46}
     47}}}
     48 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 [http://wiki.openstreetmap.org/wiki/DE:Hiking DE:Hiking]. Example:
     49{{{#!mapcss
     50node {
     51    icon-image: "wiki://Symbol_Jakobsweg.png";
     52}
     53}}}
     54== Image formats ==
     55=== Raster formats ===
     56JOSM can display the following raster formats: `png`, `jpeg`, `gif` and `bmp`.[[br]]
     57(Basically all formats that are supported by the Java Runtime Environment v. 6)
     58
     59=== Vector formats ===
     60There is also basic build-in support for ''scalable vector graphics'' (`svg`). Most `svg`-images should be rendered correctly, but in some cases the result may be flawed. This is due to limitations of the used [http://svgsalamander.java.net/ svg-library].
     61
     62One 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.
     63
     64In case it does not, convert the `svg` image manually to `png` or try to "simplify" the `svg` in a way that it can be handled by JOSM.