1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>highlight.mapcss</title>
<meta name="generator" content="KF5::SyntaxHighlighting - Definition (MapCSS) - Theme (Breeze Light)"/>
</head><body style="background-color:#ffffff;color:#1f1c1b"><pre>
<span style="color:#898887">/*</span>
<span style="color:#898887"> * </span><span style="color:#ca60ca;font-style:italic">SPDX-FileCopyrightText:</span><span style="color:#898887"> 2022 Volker Krause <vkrause@kde.org></span>
<span style="color:#898887"> * </span><span style="color:#ca60ca;font-style:italic">SPDX-License-Identifier:</span><span style="color:#ca60ca;font-style:italic"> </span><span style="color:#ca60ca;font-style:italic">MIT</span>
<span style="color:#898887"> */</span>
<span style="color:#898887">// samples taken from kosmindoormap MapCSS parser unit tests</span>
<span style="font-weight:bold">@import</span> <span style="color:#644a9b">url</span>(<span style="color:#bf0303">"included.mapcss"</span>);
<span style="color:#898887">// union selector</span>
<span style="color:#0057ae">area</span>[railway=platform],
<span style="color:#0057ae">relation</span>[type=multipolygon][railway=platform]
{
<span style="color:#644a9b;font-weight:bold">color</span>: <span style="color:#b08000">#ff550022</span>;
<span style="color:#644a9b;font-weight:bold">fill-color</span>: <span style="color:#b08000">#80f0e0d0</span>;
}
<span style="color:#898887">// chained selector</span>
<span style="color:#0057ae">area</span>[railway=platform] <span style="color:#0057ae">node</span>[sign]
{
<span style="color:#644a9b;font-weight:bold">fill-color</span>: <span style="color:#b08000">#ff0000</span>;
<span style="color:#644a9b;font-weight:bold">opacity</span>: <span style="color:#b08000">0.5</span>;
}
<span style="color:#898887">// condition with colon-separated keys</span>
<span style="color:#0057ae">node</span>[building:part][building:part=elevator]
{
<span style="color:#644a9b;font-weight:bold">opacity</span>: <span style="color:#b08000">1</span>;
<span style="color:#644a9b;font-weight:bold">color</span>: building:color;
}
<span style="color:#898887">// text properties</span>
<span style="color:#0057ae">*</span> {
<span style="color:#644a9b;font-weight:bold">text</span>: ref;
<span style="color:#644a9b;font-weight:bold">text-color</span>: <span style="color:#b08000">#ff00ff</span>;
}
<span style="color:#898887">// line properties</span>
<span style="color:#0057ae">line</span> {
<span style="color:#644a9b;font-weight:bold">dashes</span>: <span style="color:#b08000">3</span>,<span style="color:#b08000">5</span>;
<span style="color:#644a9b;font-weight:bold">linecap</span>: <span style="color:#aa5500">round</span>;
<span style="color:#644a9b;font-weight:bold">linejoin</span>: <span style="color:#aa5500">bevel</span>;
<span style="color:#644a9b;font-weight:bold">casing-width</span>: <span style="color:#b08000">1</span>;
<span style="color:#644a9b;font-weight:bold">casing-color</span>: <span style="color:#b08000">#444444</span>;
<span style="color:#644a9b;font-weight:bold">casing-dashes</span>: <span style="color:#b08000">1</span>,<span style="color:#b08000">1</span>;
}
<span style="color:#898887">// zoom ranges</span>
<span style="color:#0057ae">node</span>|<span style="color:#ca60ca">z12-13</span> {}
<span style="color:#0057ae">node</span>|<span style="color:#ca60ca">z10</span> {}
<span style="color:#0057ae">node</span>|<span style="color:#ca60ca">z-10</span> {}
<span style="color:#0057ae">node</span>|<span style="color:#ca60ca">z10-</span> {}
<span style="color:#0057ae">node</span>|<span style="color:#ca60ca">z12-13</span>[name] {}
<span style="color:#0057ae">node</span>|<span style="color:#ca60ca">z14-</span>[name] {}
<span style="color:#898887">// numeric comparison conditions</span>
<span style="color:#0057ae">*</span> [layer><span style="color:#b08000">1</span>],
<span style="color:#0057ae">*</span> [layer<<span style="color:#b08000">2</span>],
<span style="color:#0057ae">*</span> [layer>=<span style="color:#b08000">3</span>],
<span style="color:#0057ae">*</span> [layer<=<span style="color:#b08000">4</span>] {}
<span style="color:#898887">// object types as tag or property values</span>
<span style="color:#0057ae">area</span>[indoor=area] {
<span style="color:#644a9b;font-weight:bold">text-position</span>: <span style="color:#aa5500">line</span>;
<span style="color:#644a9b;font-weight:bold">width</span>: width;
}
<span style="color:#898887">// units</span>
<span style="color:#0057ae">*</span> {
<span style="color:#644a9b;font-weight:bold">font-size</span>: <span style="color:#b08000">16</span><span style="font-weight:bold">pt</span>;
<span style="color:#644a9b;font-weight:bold">width</span>: <span style="color:#b08000">42</span><span style="font-weight:bold">px</span>;
<span style="color:#644a9b;font-weight:bold">casing-width</span>: <span style="color:#b08000">2</span><span style="font-weight:bold">m</span>;
}
<span style="color:#898887">// negative numbers</span>
<span style="color:#0057ae">*</span> {
<span style="color:#644a9b;font-weight:bold">width</span>: -<span style="color:#b08000">10.42</span>;
}
<span style="color:#898887">// colors</span>
<span style="color:#0057ae">*</span> {
<span style="color:#644a9b;font-weight:bold">text-color</span>: <span style="color:#b08000">#aabbcc</span>;
<span style="color:#644a9b;font-weight:bold">fill-color</span>: <span style="color:#b08000">#80ccbbaa</span>;
<span style="color:#644a9b;font-weight:bold">casing-color</span>: <span style="color:#b08000">#123</span>;
<span style="color:#644a9b;font-weight:bold">shield-color</span>: <span style="color:#644a9b">rgb</span>(<span style="color:#b08000">1.0</span>, <span style="color:#b08000">0.5</span>, <span style="color:#b08000">0.25</span>);
<span style="color:#644a9b;font-weight:bold">shield-casing-color</span>: <span style="color:#644a9b">rgba</span>(<span style="color:#b08000">0.75</span>, <span style="color:#b08000">1.0</span>, <span style="color:#b08000">0.25</span>, <span style="color:#b08000">0.5</span>);
<span style="color:#644a9b;font-weight:bold">color</span>: <span style="color:#bf0303">"red"</span>;
}
<span style="color:#898887">// set tag</span>
<span style="color:#0057ae">node</span>[shop=bakery] {
<span style="font-weight:bold">set</span> mx:important;
}
<span style="color:#898887">// set tag to a specific value</span>
<span style="color:#0057ae">area</span>[shop=bakery] {
<span style="font-weight:bold">set</span> mx:importance = <span style="color:#bf0303">"high"</span>;
<span style="font-weight:bold">set</span> mx:importance = 20;
}
<span style="color:#898887">// set class</span>
<span style="color:#0057ae">node</span>[shop=bakery],
<span style="color:#0057ae">node</span>[shop=pastry]
{
<span style="font-weight:bold">set</span> <span style="color:#0057ae">.importantShops</span>;
}
<span style="color:#898887">// class selectors</span>
<span style="color:#0057ae">node</span><span style="color:#0057ae">.importantShops</span> { <span style="color:#644a9b;font-weight:bold">color</span>: <span style="color:#bf0303">"red"</span>; }
<span style="color:#0057ae">way</span><span style="color:#0057ae">.importantShops</span>|<span style="color:#ca60ca">z20-</span> { <span style="color:#644a9b;font-weight:bold">color</span>: <span style="color:#bf0303">"green"</span>; }
<span style="color:#0057ae">*</span><span style="color:#0057ae">.importantShops</span>[access=no] { <span style="color:#644a9b;font-weight:bold">color</span>: <span style="color:#bf0303">"blue"</span>; }
<span style="color:#898887">// layer selectors (see https://wiki.openstreetmap.org/wiki/MapCSS/0.2/Proposal_layer_selector)</span>
<span style="color:#0057ae">way</span>[highway]<span style="font-weight:bold">::road</span> {
<span style="color:#644a9b;font-weight:bold">width</span>: <span style="color:#b08000">8</span>;
<span style="color:#644a9b;font-weight:bold">color</span>: <span style="color:#b08000">#ffffff</span>;
<span style="color:#644a9b;font-weight:bold">casing-width</span>: <span style="color:#b08000">2</span>;
<span style="color:#644a9b;font-weight:bold">casing-color</span>: <span style="color:#b08000">#a0a0a0</span>;
}
<span style="color:#0057ae">way</span>[railway=tram]<span style="font-weight:bold">::tram</span> {
<span style="color:#644a9b;font-weight:bold">width</span>: <span style="color:#b08000">2</span>;
<span style="color:#644a9b;font-weight:bold">color</span>: <span style="color:#b08000">#303030</span>;
<span style="color:#644a9b;font-weight:bold">z-index</span>: <span style="color:#b08000">1</span>;
}
<span style="color:#898887">// default layer selector</span>
<span style="color:#0057ae">node</span><span style="font-weight:bold">::default</span> {
<span style="color:#644a9b;font-weight:bold">icon-image</span>: <span style="color:#bf0303">"bla"</span>;
}
<span style="color:#898887">//quoted values in conditions</span>
<span style="color:#0057ae">line</span>|<span style="color:#ca60ca">z16-</span>[highway=service][service=<span style="color:#bf0303">"drive-through"</span>] {
<span style="font-weight:bold">set</span> <span style="color:#0057ae">.service</span>;
<span style="color:#644a9b;font-weight:bold">width</span>: <span style="color:#b08000">1.5</span><span style="font-weight:bold">m</span>;
}
<span style="color:#898887">// single quote strings</span>
<span style="color:#0057ae">*</span>[service=<span style="color:#bf0303">'drive-through'</span>] {
<span style="color:#644a9b;font-weight:bold">text</span>: <span style="color:#bf0303">'abc</span><span style="color:#924c9d">\'</span><span style="color:#bf0303">def"ghi</span><span style="color:#924c9d">\n</span><span style="color:#bf0303">jkl'</span>;
}
</pre></body></html>
|
