Osmarender/Symbols

From OpenStreetMap

Jump to: navigation, search

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 infos about SVG and Osmarender.

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.

Contents

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, such as 30x 30, or 90x90 depending on the complexity of required symbol.
  • 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)
    • remove unnecessary code (eg code for 'fills' when in fact there is no fill).

Convert SVGs for use in Osmarender

First, open the SVG in a text editor so you can see the code. Scroll past the cruft put in by your SVG editor until you find the path definitions that will look something like this: 

 <path style="stroke:#eeeeee; stroke-width:3; stroke-linecap:butt; stroke-linejoin:miter;
              stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1"
   d="M 19.4,4.6 C 19.4,31.5 19.4,31.5 19.4,31.5"
   id="path11206" />

This can then be converted into a symbol definition: 

 <svg:symbol id="pointless_node" viewBox="0 0 10 10">
   <svg:path d="M 19.4,4.6 C 19.4,31.5 19.4,31.5 19.4,31.5" style="stroke:#eeeeee" />
 </svg:symbol>

Finally, you need a rule for rendering the pointless line: 

 <rule e="node" k="amenity" v="pointless_node">
   <symbol xlink:href="#pointless_node" width='2.5' height='2.5' transform='translate(-1.25,-1.25)' />
 </rule>

Enter both the rule and the symbol definition into the rules file and you should be ready to roll!

Its probably self-explanatory, but here is an explanation of the code for the rules. Taking the example of the rule above, the first line determines what OSM feature will have the symbol displayed for it (ie any node with the key/value pair amenity=pointless_node). The second line determines what size the symbol is displayed at, in this instance 2.5 pixels square (for practical examples of relative sizes look at existing symbols, and decide whether the symbol you want displayed would be larger or smaller - in the case of hospitals below I decided that they (i) were relatively important and so should be displayed a lower zoom levels; and (ii) tended to occupy a large area; then they should be displayed as a relatively large symbol), then by translating the position half the width and half the height, you center the symbol over the relevant node.

Symbol format in the symbols directory

All symbols must be in SVG format, here are the details:

  • A file with only the symbol itself in it included in a <svg/> and <defs/> tag.
  • A unique ID in the id attribute of the symbol element which must start with symbol-.
  • A viewBox attribute which makes sure the symbol is centered and sized correctly. All symbols should be exactly 1x1 units of size and the point (0,0) should be the middle of your icon. That way all symbols are the same size by default and positioned correctly centered on a node. When symbols are used later they can be resized or otherwise transformed if symbols of different size are desired.

Here is an example: 

 <?xml version="1.0" encoding="utf-8"?>
 <svg xmlns="http://www.w3.org/2000/svg">
   <defs>
     <symbol
       id="symbol-airport"
       viewBox="5 5 10 10"
       fill="black"
       fill-opacity="1"
       fill-rule="evenodd"
       stroke="none">
       <path d="M 9.2,5 C 9.2,4.5 9.8,3.2 10,3 L 9,3 L 8,4 L 5.5,4
                L 8,0 L 6,0 L 3,4 C 2,4 1,4.2 0.5,4.5 C 0,5 0,5 0.5,5.5
                C 1,5.8 2,6 3,6 L 6,10 L 8,10 L 5.5,6 L 7.8,6 L 9,7
                L 10,7 C 9.8,6.8 9.2,5.5 9.2,5 z " />
     </symbol>
   </defs>
 </svg>

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:


How to add a symbol

  1. Create your icon as an SVG symbol. See above for the format.
  2. Add the symbol definition to the other symbols in the symbols subdirectory. The files in this directory must have the same name as the ID of the symbol (minus the symbol- prefix).
  3. You can now use the symbols in your rules file with <symbol ref="symbol id"/> (don't use the symbol- prefix here).

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

example needed here

Sources of symbols

Make sure that all map symbols are public domain or are available under a compatible Creative Commons License.

Retrieved from "http://wiki.openstreetmap.org/index.php/Osmarender/Symbols"
Personal tools
recent changes