Osmarender/Symbols
Osmarender can use SVG symbols to draw icons for post offices, telephones, churches and many other features. See the rule file description on how to include symbols in your map. See the Osmarender/SVG section for more information about SVG and Osmarender. The symbols of the slippy map osmarender can be found here: http://svn.openstreetmap.org/applications/rendering/osmarender/stylesheets/symbols/
You can put symbols in your rules file or they can be in external files (linked in through the xlink mechanism of SVG). But the easiest way of including them is by putting them in the symbols directory. They will then get linked into the SVG map file when the map is created.
How to create the symbols
These symbols were created in Inkscape, then converted to a syntax that Osmarender understands. You can use any tool to create the SVG, but here are some tips.
Draw the SVGs
- Open Inkscape, and then set the page size in document properties to something manageable. You can use actual size of symbol, for example 16x16 for symbol which should be 16px width on the map. Standard rule files have symbolScale set so that symbol will have pixel size 16 at all zoom levels.
- Use Inkscape drawing tools to create the symbol, trying to reduce as far as possible the complexity of the symbol. Some tips are:
- try where possible to use straight lines;
- reduce the number of nodes to the basic minimum
- use the "snap to grid" feature for nodes
- Manually edit the XML (using Inkscape's XML editor window) to 'tidy up' the code. eg.
- reduce the decimal precision of path data (eg M 20.34763 might be able to represented as M 20 without loss of detail). For a long path with many nodes this can be quiet cumbersome. Try the perl-script clean_svg.pl to automate this step.
- remove unnecessary code (eg code for 'fills' when in fact there is no fill).
Convert SVGs for use in Osmarender
If you want to include symbol directly in rules file, set it's id to symbol-<symbol-name> and paste it into one of <defs> sections of rules file. No conversation is necessary if you put symbol into symbols directory.
Osmarender used to require conversions to special format. The format is still supported, you can see it's description here.
Symbol format in the symbols directory
Save the symbol as normal svg in symbols directory. You don't have to set symbol's id, filename without .svg will be used.
Osmarender used to require extra conversion steps, they're described here
Symbol catalogue
A catalogue of all symbols is included in the subversion distribution. It can be re-generated with the Makefile from all the available symbols and contains the symbols themselves, a crosshair to help with sizing and positioning the symbols and the IDs of the symbols. This catalogue is not needed for rendering maps, it is just there to help you find out what symbols are available.
The catalogue is available in several formats:
2009-02-08 the rest of these links are broken?
symbol-catalogue.svg(404) orsymbol-catalogue.pdf(404)symbol-catalogue.png(404)
How to add a symbol
- Create svg image with your symbol.
- Save it to symbols directory.
- You can now use the symbol in your rules file with <symbol ref="symbol id"/>. symbol id is filename of svg file without .svg.
Symbols on ways
You can put symbols on ways by using an SVG marker. This can then be put on the first (marker-start) or last (marker-end) node or on all middle (marker-mid) nodes.
The following code can be used to create the chairlift image on the right:
| rules code |
<rule e="way" k="aerialway" v="chair_lift"> <line class='chairlift' /> </rule> |
| style code |
.chairlift {
stroke-width: 1;
stroke-linecap: butt;
stroke-linejoin: round;
stroke: #0000ff;
fill: none;
marker-mid:url(#chairlift);
}
|
| marker code |
<svg:marker id="chairlift" refX="4" refY="0" markerUnits="userSpaceOnUse" orient="auto">
<svg:path style="fill:none; stroke:#0000dc; stroke-width:1px; stroke-linecap:butt;
stroke-linejoin:miter; stroke-opacity:1"
d="M 2.5,5 L 2.5,8 L 6,8M 5,14 L 5,10 L 2,10 L 2,7 L 3,7
L 3,10M 3,0 C 3,1 3,1 3,1 L 0,4 L 0,12 L 0,12 L 3,13" />
<svg:path style="opacity:1; fill:#0000dc; fill-opacity:1; fill-rule:nonzero; stroke:none"
d="M 3.5 5 A 1 1 0 1 1 1.5,5 A 1 1 0 1 1 3.5 5 z" />
</svg:marker>
|
Symbols as patterns in areas
wood=coniferous (e.g. way 58203093) used to be rendered with a special pattern
Sources of symbols
Make sure that all map symbols are public domain or are available under a compatible Creative Commons License.