Tunnels

Tunnels can be shown by fading the road, drawing it as a dashed line, or both. Graphics can be drawn to show the mouths of the tunnel.

tunnel1

The tunnel named IJ-TUNNEL above shows all three of these methods and is drawn using this style:

<tunnel dashArray='1,1' mouth='dimgrey' mouthWidth='20%,1' mouthPath='m 0 512 a 512 512 0 1 1 0 -1024'/>

You use the <tunnel> tag inside a <layer> tag (or inside a <condition> in a layer). The <tunnel> attributes are:

  • fade: a value in the range 0...1: the amount by which the tunnel is faded compared to a surface-level road. 0 is no fading; 1 makes the tunnel disappear.
  • fill: the fill color. If this is not specified, the road's ordinary fill color is used.
  • border: the border color. If this is not specified, the road's ordinary border color is used.
  • dashArray: the dash array if any. If this is not specified the dash array is inherited from the ordinary road style.
  • maxScale: maximum scale (denominator) at which the tunnel style is used
  • mouthWidth: width of the tunnel mouth symbol; if a percentage is used it is relative to the width of the road. If SVG is used (see below) the width is used as the width and height of the SVG image.
  • mouthPaint: paint used for the tunnel mouth symbol
  • mouthPath: a path, using SVG path syntax, for graphics drawn at tunnel mouths. It specifies the right hand end, relative to the end of the tunnel. The other end is generated by reflection. The path units are 1024ths of the line width unless modified by unitsPerLineWidth.
  • unitsPerLineWidth: the size of the units in endPath, defined as the number of units equal to the line width. The default value is 1024

Using SVG for tunnel graphics

You can use SVG for more complex graphics for tunnel mouths. Do this by embedding an <svg> element inside a <tunne>l element. For example:

 

<tunnel dashArray='1,1' fill='yellow' mouthWidth='150%' maxScale='25000'>
   <svg x='-750' y='-750' width='1500' height='1500'>
   <linearGradient id="tunnel_gradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="-512" y2="0">
      <stop offset="0" style="stop-color:cornflowerblue"/>
      <stop offset="1" style="stop-color:yellow"/>
   </linearGradient>
   <path stroke='none' fill="url(#tunnel_gradient)" d='m 0 -500 a 500 500 0 1 0 0 1000 z'/>
   <path stroke='brown' fill='none' stroke-width='60' d='m 0 -500 a 500 500 0 1 0 0 1000'/>
   </svg>
</tunnel>

which gives this:

tunnel2

In this example the SVG view rectangle is 1500 units wide, centered on (0,0). The rectangle has to be big enough for the graphics to be rotated to any angle without being clipped off. The width of the SVG rectangle is scaled to the width given by mouthWidth, so 1500 units are scaled to 150% of the line width - therefore 1000 SVG units correspond to the width of the line. The graphics are drawn relative to the right hand end of the tunnel, with (0,0) at the end itself, and the x axis aligned to the direction of the tunnel.

Style Sheets Directory