3.10.13. ArcSymbolizer

Note

The ArcSymbolizer is a recent experimental addition and is not yet available in released Mapnik versions. It supports the AGG, Cairo and SVG renderer backends.

The ArcSymbolizer can draw full circles and partial arcs. The arc center point is defined by the layer geometry while radius, start and end angle in case of arcs, and visual styling are defined by the symbolizer attributes.

The motivation to create the ArcSymbolizer was to be able to render sea navigation lights in a way similar to how the custom OpenSeaMap renderer does it, but can also be used for other purposes like e.g visualization of camera viewing areas, or even to add simple pie charts to a map.

Arcs are drawn clockwise from the start-angle to the end-angle, angle values are given in degrees with 0° / 360° being north / up. As the angles default to 0° and 360° a full circle is drawn when no angle values are given explicitly.

The ArcSymbolizer allows to style how the arc is filled and what strokes to use for the actual ark, and for the radius lines connecting the end points of the arc to the center point. Adding a textual label is also possible, the text will be drawn curved along the arc when the arc is longer than the text; otherwise the text will be drawn facing outwards from the arc center.

Note that stroke-dasharray and stroke-dashoffset only apply to the radius lines; the arc line itself is always drawn solid.

Note

The attribute names are not final yet.
Table 34. ArcSymbolizer Attributes
Attribute Type Default Description

radius

float

0

Radius in pixels

start-angle

float

0

Starting arc angle, 0° being north/up

end-angle

float

360

Ending arc angle, arc is drawn clockwise from start to end

fill

color

none

Circle / arc fill color

fill-opacity

0.0 - 1.0

1

…​ TODO …​

opacity

0.0 - 1.0

1

TODO: Multiplies both fill and stroke opacity?

stroke

color

none

Color of the outer arc line

stroke-width

float

1

stroke-opacity

0.0 - 1.0

1

stroke-dasharray

number list

none

Applies to the radius lines only, the arc line is always solid

stroke-dashoffset

float

0

radius-lines

boolean

false

Draw the two radius "spokes" from the center to the arc ends

radius-line-stroke

color

stroke

Color of the radius lines, defaults to the arc stroke color

radius-line-stroke-width

float

stroke-width

Width of the radius lines, defaults to the arc stroke width

text

expression

none

Label, bent along the arc or placed perpendicular to it

text-face-name

string

Font face for the label, required with text

text-fontset-name

string

Fontset alternative to text-face-name

text-size

float

10

text-fill

color

black

Text color

text-opacity

0.0 - 1.0

1

text-halo-fill

color

white

text-halo-radius

float

0

text-halo-opacity

0.0 - 1.0

1

text-character-spacing

float

0

text-offset

float

2

Radial gap between the arc line and the label

comp-op

SVG compositing

src-over
Example 67. ArcSymbolizer radius, start-angle and end-angle
<?xml version="1.0" encoding="utf-8"?>
<!-- simple example showing use of start and end angles -->
<Map background-color="white">

  <Style name="style">
    <Rule>
      <ArcSymbolizer radius="40" start-angle="[start]" end-angle="[end]"
                     fill="steelblue" fill-opacity="0.3"
                     stroke="steelblue" stroke-width="2"/>
      <TextSymbolizer face-name="DejaVu Sans Book" allow-overlap="true" dy="55">[start]+"-"+[end]</TextSymbolizer>
    </Rule>
  </Style>

  <Layer name="layer">
    <StyleName>style</StyleName>
    <Datasource>
      <Parameter name="type">csv</Parameter>
      <Parameter name="inline">
wkt,start,end
"POINT(0 0)",45,135
"POINT(2 0)",134,45
"POINT(4 0)",0,360
      </Parameter>
    </Datasource>
  </Layer>

</Map>
angles
Example 68. ArcSymbolizer fill and stroke
<?xml version="1.0" encoding="utf-8"?>
<Map background-color="white">

  <Style name="style">
    <Rule>
      <Filter>[variant] = 'fill'</Filter>
      <ArcSymbolizer radius="50" start-angle="270" end-angle="90"
                     fill="orange"/>
    </Rule>
    <Rule>
      <Filter>[variant] = 'stroke'</Filter>
      <ArcSymbolizer radius="50" start-angle="270" end-angle="90"
                     stroke="black" stroke-width="2"/>
    </Rule>
    <Rule>
      <Filter>[variant] = 'both'</Filter>
      <ArcSymbolizer radius="50" start-angle="270" end-angle="90"
                     fill="orange" stroke="black" stroke-width="2"/>
    </Rule>
    <Rule>
      <TextSymbolizer face-name="DejaVu Sans Book" allow-overlap="true" dy="20">[variant]</TextSymbolizer>
    </Rule>
  </Style>

  <Layer name="layer">
    <StyleName>style</StyleName>
    <Datasource>
      <Parameter name="type">csv</Parameter>
      <Parameter name="inline">
wkt,variant
"POINT(0 0)",fill
"POINT(2 0)",stroke
"POINT(4 0)",both
      </Parameter>
    </Datasource>
  </Layer>

</Map>
fill stroke
Example 69. ArcSymbolizer radius lines

Radius lines inherit the arc stroke by default, can be given their own color and width, and are the only part affected by stroke-dasharray.

<?xml version="1.0" encoding="utf-8"?>
<Map background-color="white">

  <Style name="style">
    <Rule>
      <Filter>[variant] = 'default'</Filter>
      <ArcSymbolizer radius="50" start-angle="300" end-angle="60"
                     stroke="blue" stroke-width="2"
                     radius-lines="true"/>
    </Rule>
    <Rule>
      <Filter>[variant] = 'styled'</Filter>
      <ArcSymbolizer radius="50" start-angle="300" end-angle="60"
                     stroke="blue" stroke-width="2"
                     radius-lines="true"
                     radius-line-stroke="red" radius-line-stroke-width="4"/>
    </Rule>
    <Rule>
      <Filter>[variant] = 'dashed'</Filter>
      <ArcSymbolizer radius="50" start-angle="300" end-angle="60"
                     stroke="blue" stroke-width="2"
                     radius-lines="true" stroke-dasharray="4,3"/>
    </Rule>
    <Rule>
      <TextSymbolizer face-name="DejaVu Sans Book" allow-overlap="true" dy="20">[variant]</TextSymbolizer>
    </Rule>
  </Style>

  <Layer name="layer">
    <StyleName>style</StyleName>
    <Datasource>
      <Parameter name="type">csv</Parameter>
      <Parameter name="inline">
wkt,variant
"POINT(0 0)",default
"POINT(2 0)",styled
"POINT(4 0)",dashed
      </Parameter>
    </Datasource>
  </Layer>

</Map>
radius lines
Example 70. ArcSymbolizer text

The first arc is long enough for its label, so the text is bent along its outside. The same goes for the second, on the lower half of the circle, where the reading direction is flipped to stay readable. The third arc is too short for its label, so the text is placed perpendicular to the arc instead.

<?xml version="1.0" encoding="utf-8"?>
<Map background-color="white">

  <Style name="style">
    <Rule>
      <ArcSymbolizer radius="[radius]" start-angle="[start]" end-angle="[end]"
                     stroke="darkblue" stroke-width="2"
                     text="[label]" text-face-name="DejaVu Sans Book"
                     text-size="10" text-fill="black"/>
      <DotSymbolizer width="5" height="5" fill="red"/>
    </Rule>
  </Style>

  <Layer name="layer">
    <StyleName>style</StyleName>
    <Datasource>
      <Parameter name="type">csv</Parameter>
      <Parameter name="inline">
wkt,radius,start,end,label
"POINT(0 0)",50,300,60,"above"
"POINT(2 0)",50,120,240,"below"
"POINT(4 0)",45,80,100,"small arc"
      </Parameter>
    </Datasource>
  </Layer>

</Map>
text
Example 71. ArcSymbolizer light sectors

Using the ArcSymbolizer to display navigational lights in a way similar to the custom OpenSeaMap renderer:

<?xml version="1.0" encoding="utf-8"?>
<Map background-color="white">

  <!-- Visibility sectors of a naval navigation light, in the style
       used by OpenSeaMap: one coloured arc per sector labelled with its
       light characteristic, with dashed radius lines marking the sector
       limits. -->
  <Style name="style">
    <Rule>
      <ArcSymbolizer radius="[radius]" start-angle="[start]" end-angle="[end]"
                     stroke="[colour]" stroke-width="4"
                     radius-lines="true"
                     radius-line-stroke="dimgray" radius-line-stroke-width="1"
                     stroke-dasharray="6,4"
                     text="[character]" text-face-name="DejaVu Sans Book"
                     text-size="9" text-fill="black"/>
      <DotSymbolizer width="8" height="8" fill="black"/>
    </Rule>
  </Style>

  <Layer name="layer">
    <StyleName>style</StyleName>
    <Datasource>
      <Parameter name="type">csv</Parameter>
      <Parameter name="inline">
wkt,start,end,radius,colour,character
"POINT(0 0)",290,10,80,red,Fl.R.4s
"POINT(0 0)",10,20,90,gold,Fl.W.4s
"POINT(0 0)",20,100,80,green,Fl.G.4s
      </Parameter>
    </Datasource>
  </Layer>

</Map>
light sectors

← Previous: DotSymbolizer | ↑ Up: Symbolizers | ⌂ Home: Mapnik - The Missing Manual | Next: Tools →