Arrows to Show the Direction of One-Way Streets

You can use the <oneWayArrow> element to define an arrow symbol to be drawn to show the direction of one-way streets. The <oneWayArrow> attributes are:

  • fill: the color used to draw the arrow.
  • border: if specified, a border is drawn in this color.
  • borderWidth: the width of the border in user units: by default, 1024 units are equal to the width of the road, but you can set the unit size to whatever you like using the unitsPerLineWidth attribute (see below).
  • color: if specified, a color to be used to colorize any SVG icon used as the arrow.
  • gap: the gap between the left edges of successive symbols, in user units, where 1024 units equal the width of the road (unless modified by unitsPerLineWidth); default value = 1024.
  • id:  if SVG is used to define the graphics (see below), the identifying name of the icon.
  • isLabel: allowed values are 'yes' and 'no'; the default is 'no'. If the value is 'yes', this attribute treats arrows as labels, which means that they are drawn just after the object's label and will not overlap other labels in the same label layer, or other arrows with the 'isLabel' attribute.
  • maxScale: the maximum scale factor at which the symbols are drawn. The default is 10000.
  • opacity: the opacity used for the fill color.
  • path: a path, defined using SVG path data syntax (the 'd' attribute in the element), defining the arrow or other symbol, in a coordinate system where the direction of the road is from left to right and the width of the road is 1024 units, unless modified by unitsPerLineWidth.
  • ref: the name of an arrow icon to be drawn; the icon must have been defined in a <defs> element earlier in the style sheet.
  • unitsPerLineWidth: the number of units in the path definition that are equal to the width of the road. The default value is 1024.
  • width: if SVG is used to define the graphics (see below), the width of the graphics. The default value is the width of the road, and percentages also refer to the width of the road.
  • height: if SVG is used to define the graphics (see below), the height of the graphics. The default value is the width of the road, or (if the width attribute was used) the same value as the width. Percentages refer to the width of the road.

Example: a broad transparent yellow arrow:

<oneWayArrow path="M 0 50 H 300 L 40 300 H 180 L 505 0 L 180 -300 H 40 L 300 -50 H 0 Z" fill="yellow" opacity="0.5"/>

If you use <oneWayArrow> on a layer other than "road" it is treated as meaning <repeatedSymbol> and the symbols are unconditionally drawn along the path in the direction in which it is defined.

Using SVG for arrows

For more complex arrow graphics, where a filled shape with an optional border is not enough, use SVG, You can do it like this:

<oneWayArrow gap='2500' opacity='1' isLabel='yes'>
   <svg x='-500' y='-500' width='1000' height='1000'>
      <linearGradient id="XXX" gradientUnits="userSpaceOnUse" x1="-500" y1="0" x2="1000" y2="0">
         <stop offset="0" stop-color='pink'/>
         <stop offset="1" stop-color='red'/>
     </linearGradient>
    <path fill='url(#XXX)' d='M -450 -50 V 50 H 250 L -100 400 H 50 L 450 0 L 50 -400 H -100 L 250 -50 H -450 Z' />
   </svg>
</oneWayArrow>

which produces arrows that fade from red to pink along their length.

You can also define the arrow icon in the <defs> section and reference it using the ref attribute.

Style Sheets Directory