Points¶

Code¶

1
2
3
4
5
6
7
8

 * {
   mark: symbol(circle);
   mark-size: 6px;
 }

 :mark {
   fill: red;
 }

Details¶

There are two rules in this CSS, the first one (lines 1-4) matches all features, and asks them to be depicted with a circular mark, 6 pixels wide. The second rule uses a symbol selector, :mark, which selects all marks in the previous rules, and allows to specify how to fill the contents of the circle, in this case, with a solid red fill (a stand alone fill property would have been interpreted as the request to fill all polygons in the input with solid red instead).

Code¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

 * {
   mark: symbol(circle);
   mark-size: 6px;
 }

 :mark {
   fill: red;
   stroke: black;
   stroke-width: 2px;
 }

Details¶

This example is similar to the Simple point example, in this case a stroke and a stroke width have been specified in the mark selector in order to apply them to the circle symbols.

Code¶

1
2
3
4
5
6
7
8
9

 * {
   mark: symbol(square);
   mark-size: 12px;
   mark-rotation: 45;
 }

 :mark {
   fill: #009900;
 }

Details¶

In this example, line 2 sets the shape to be a square, with line 8 setting the color to a dark green (#009900). Line 3 sets the size of the square to be 12 pixels, and line 4 set the rotation is to 45 degrees.

Code¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

 * {
   mark: symbol(triangle);
   mark-size: 12;
 }

 :mark {
   fill: #009900;
   fill-opacity: 0.2;
   stroke: black;
   stroke-width : 2px;
 }

Details¶

In this example, line 2 once again sets the shape, in this case to a triangle, where line 3 sets the mark size to 12 pixels. Line 6 sets the fill color to a dark green (#009900) and line 7 sets the opacity to 0.2 (20% opaque). An opacity value of 1 means that the shape is drawn 100% opaque, while an opacity value of 0 means that the shape is drawn 0% opaque, or completely transparent. The value of 0.2 (20% opaque) means that the fill of the points partially takes on the color and style of whatever is drawn beneath it. In this example, since the background is white, the dark green looks lighter. Were the points imposed on a dark background, the resulting color would be darker. Line 8 set the stroke color to black and width to 2 pixels.

Code¶

1
2
3
4

 * {
   mark: url(smileyface.png);
   mark-mime: "image/png";
 }

Details¶

This style uses a graphic instead of a simple shape to render the points. Line 2 sets the path and file name of the graphic, while line 3 indicates the format (MIME type) of the graphic (image/png). In this example, the graphic is contained in the same directory as the SLD, so no path information is necessary, although a full URL could be used if desired.

Graphic used for points

Code¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

 * {
   mark: symbol(circle);
   mark-size: 6px;
   label: [name];
   font-fill: black;
 }

 :mark {
   fill: red;
 }

Details¶

This style is quite similar to the Simple point, but two new properties have been added to specify the labelling options. Line 4 indicates that the label contents come from the “name” attribute (anything in square brackets is a CQL expression, the attribute name being the simplest case) while Line 5 sets the label color to black.

Code¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

 * {
   mark: symbol(circle);
   mark-size: 6px;
   label: [name];
   font-fill: black;
   font-family: Arial;
   font-size: 12;
   font-weight: bold;
   label-anchor: 0.5 0;
   label-offset: 0 5;
 }

 :mark {
   fill: red;
 }

Details¶

This example expands on Point with default label and specifies the font attributes, in particular, the text is Aria, bold, 12px wide. Moreover, the label is moved on top of the point, by specifying an anchor of 0.5 0, which sets the point to be centered (0.5) horizontally axis and bottom aligned (0.0) vertically with the label, and an offset which moves the label 5 pixels up vertically.

The result is a centered bold label placed slightly above each point.

Code¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

 * {
   mark: symbol(circle);
   mark-size: 6px;
   label: [name];
   font-fill: #990099;
   font-family: Arial;
   font-size: 12;
   font-weight: bold;
   label-anchor: 0.5 0;
   label-offset: 0 25;
   label-rotation: -45;
 }

 :mark {
   fill: red;
 }

Details¶

This example is similar to the Point with styled label, but there are three important differences. Line ** specifies 25 pixels of vertical displacement. **Line 11 specifies a rotation of “-45” or 45 degrees counter-clockwise. (Rotation values increase clockwise, which is why the value is negative.) Finally, line 5 sets the font color to be a shade of purple (#99099).

Note that the displacement takes effect before the rotation during rendering, so in this example, the 25 pixel vertical displacement is itself rotated 45 degrees.

Code¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

 * {
   mark: symbol(circle);
 }

 :mark {
   fill: #0033CC;
 }

 [pop < 50000] {
   mark-size: 8;
 }

 [pop >= 50000] [pop < 100000] {
   mark-size: 12;
 }

 [pop >= 100000] {
   mark-size: 16;
 }

Details¶

This style shows how the basic mark setup (red circle, default size) can be overridden via cascading, changing the size depending on the pop attribute value, with smaller values yielding a smaller circle, and larger values yielding a larger circle.

The three rules are designed as follows:

The result of this style is that cities with larger populations have larger points. In particular, the rule at Line 9 matches all features whose “pop” attribute is less than 50000, the rule at Line 13 matches all features whose “pop” attribute is between 50000 and 100000 (mind the space between the two predicates, it is equivalent to and AND, if we had used a comma it would have been an OR instead), while the rule at Line 17 matches all features with more than 100000 inhabitants.

Code¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

 * {
   mark: symbol(circle);
 }

 :mark {
   fill: #CC3300;
 }

 [@scale < 16000000] {
   mark-size: 12;
 }

 [@scale > 16000000] [@scale < 32000000] {
   mark-size: 8;
 }

 [@scale > 32000000] {
   mark-size: 4;
 }

Details¶

It is often desirable to make shapes larger at higher zoom levels when creating a natural-looking map. This example styles the points to vary in size based on the zoom level (or more accurately, scale denominator). Scale denominators refer to the scale of the map. A scale denominator of 10,000 means the map has a scale of 1:10,000 in the units of the map projection.

This style contains three rules matching the scale. The three rules are designed as follows:

The order of these rules does not matter since the scales denominated in each rule do not overlap.

The rules use the “@scale” pseudo-attribute, which refers to the current scale denominator, and which can be compared using the ‘<’ and ‘>’ operators only (using any other operator or function will result in errors).

The result of this style is that points are drawn larger as one zooms in and smaller as one zooms out.