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 Dark)"/>
</head><body style="background-color:#232629;color:#cfcfc2"><pre>
<span style="color:#7a7c7d">/*</span>
<span style="color:#7a7c7d"> * </span><span style="color:#3f8058;font-style:italic">SPDX-FileCopyrightText:</span><span style="color:#7a7c7d"> 2022 Volker Krause <vkrause@kde.org></span>
<span style="color:#7a7c7d"> * </span><span style="color:#3f8058;font-style:italic">SPDX-License-Identifier:</span><span style="color:#3f8058;font-style:italic"> </span><span style="color:#3f8058;font-style:italic">MIT</span>
<span style="color:#7a7c7d"> */</span>
<span style="color:#7a7c7d">// samples taken from kosmindoormap MapCSS parser unit tests</span>
<span style="font-weight:bold">@import</span> <span style="color:#8e44ad">url</span>(<span style="color:#f44f4f">"included.mapcss"</span>);
<span style="color:#7a7c7d">// union selector</span>
<span style="color:#2980b9">area</span>[railway=platform],
<span style="color:#2980b9">relation</span>[type=multipolygon][railway=platform]
{
<span style="color:#7f8c8d">color</span>: <span style="color:#f67400">#ff550022</span>;
<span style="color:#7f8c8d">fill-color</span>: <span style="color:#f67400">#80f0e0d0</span>;
}
<span style="color:#7a7c7d">// chained selector</span>
<span style="color:#2980b9">area</span>[railway=platform] <span style="color:#2980b9">node</span>[sign]
{
<span style="color:#7f8c8d">fill-color</span>: <span style="color:#f67400">#ff0000</span>;
<span style="color:#7f8c8d">opacity</span>: <span style="color:#f67400">0.5</span>;
}
<span style="color:#7a7c7d">// condition with colon-separated keys</span>
<span style="color:#2980b9">node</span>[building:part][building:part=elevator]
{
<span style="color:#7f8c8d">opacity</span>: <span style="color:#f67400">1</span>;
<span style="color:#7f8c8d">color</span>: building:color;
}
<span style="color:#7a7c7d">// text properties</span>
<span style="color:#2980b9">*</span> {
<span style="color:#7f8c8d">text</span>: ref;
<span style="color:#7f8c8d">text-color</span>: <span style="color:#f67400">#ff00ff</span>;
}
<span style="color:#7a7c7d">// line properties</span>
<span style="color:#2980b9">line</span> {
<span style="color:#7f8c8d">dashes</span>: <span style="color:#f67400">3</span>,<span style="color:#f67400">5</span>;
<span style="color:#7f8c8d">linecap</span>: <span style="color:#27aeae;font-weight:bold">round</span>;
<span style="color:#7f8c8d">linejoin</span>: <span style="color:#27aeae;font-weight:bold">bevel</span>;
<span style="color:#7f8c8d">casing-width</span>: <span style="color:#f67400">1</span>;
<span style="color:#7f8c8d">casing-color</span>: <span style="color:#f67400">#444444</span>;
<span style="color:#7f8c8d">casing-dashes</span>: <span style="color:#f67400">1</span>,<span style="color:#f67400">1</span>;
}
<span style="color:#7a7c7d">// zoom ranges</span>
<span style="color:#2980b9">node</span>|<span style="color:#3f8058">z12-13</span> {}
<span style="color:#2980b9">node</span>|<span style="color:#3f8058">z10</span> {}
<span style="color:#2980b9">node</span>|<span style="color:#3f8058">z-10</span> {}
<span style="color:#2980b9">node</span>|<span style="color:#3f8058">z10-</span> {}
<span style="color:#2980b9">node</span>|<span style="color:#3f8058">z12-13</span>[name] {}
<span style="color:#2980b9">node</span>|<span style="color:#3f8058">z14-</span>[name] {}
<span style="color:#7a7c7d">// numeric comparison conditions</span>
<span style="color:#2980b9">*</span> [layer><span style="color:#f67400">1</span>],
<span style="color:#2980b9">*</span> [layer<<span style="color:#f67400">2</span>],
<span style="color:#2980b9">*</span> [layer>=<span style="color:#f67400">3</span>],
<span style="color:#2980b9">*</span> [layer<=<span style="color:#f67400">4</span>] {}
<span style="color:#7a7c7d">// object types as tag or property values</span>
<span style="color:#2980b9">area</span>[indoor=area] {
<span style="color:#7f8c8d">text-position</span>: <span style="color:#27aeae;font-weight:bold">line</span>;
<span style="color:#7f8c8d">width</span>: width;
}
<span style="color:#7a7c7d">// units</span>
<span style="color:#2980b9">*</span> {
<span style="color:#7f8c8d">font-size</span>: <span style="color:#f67400">16</span><span style="font-weight:bold">pt</span>;
<span style="color:#7f8c8d">width</span>: <span style="color:#f67400">42</span><span style="font-weight:bold">px</span>;
<span style="color:#7f8c8d">casing-width</span>: <span style="color:#f67400">2</span><span style="font-weight:bold">m</span>;
}
<span style="color:#7a7c7d">// negative numbers</span>
<span style="color:#2980b9">*</span> {
<span style="color:#7f8c8d">width</span>: -<span style="color:#f67400">10.42</span>;
}
<span style="color:#7a7c7d">// colors</span>
<span style="color:#2980b9">*</span> {
<span style="color:#7f8c8d">text-color</span>: <span style="color:#f67400">#aabbcc</span>;
<span style="color:#7f8c8d">fill-color</span>: <span style="color:#f67400">#80ccbbaa</span>;
<span style="color:#7f8c8d">casing-color</span>: <span style="color:#f67400">#123</span>;
<span style="color:#7f8c8d">shield-color</span>: <span style="color:#8e44ad">rgb</span>(<span style="color:#f67400">1.0</span>, <span style="color:#f67400">0.5</span>, <span style="color:#f67400">0.25</span>);
<span style="color:#7f8c8d">shield-casing-color</span>: <span style="color:#8e44ad">rgba</span>(<span style="color:#f67400">0.75</span>, <span style="color:#f67400">1.0</span>, <span style="color:#f67400">0.25</span>, <span style="color:#f67400">0.5</span>);
<span style="color:#7f8c8d">color</span>: <span style="color:#f44f4f">"red"</span>;
}
<span style="color:#7a7c7d">// set tag</span>
<span style="color:#2980b9">node</span>[shop=bakery] {
<span style="font-weight:bold">set</span> mx:important;
}
<span style="color:#7a7c7d">// set tag to a specific value</span>
<span style="color:#2980b9">area</span>[shop=bakery] {
<span style="font-weight:bold">set</span> mx:importance = <span style="color:#f44f4f">"high"</span>;
<span style="font-weight:bold">set</span> mx:importance = 20;
}
<span style="color:#7a7c7d">// set class</span>
<span style="color:#2980b9">node</span>[shop=bakery],
<span style="color:#2980b9">node</span>[shop=pastry]
{
<span style="font-weight:bold">set</span> <span style="color:#27aeae">.importantShops</span>;
}
<span style="color:#7a7c7d">// class selectors</span>
<span style="color:#2980b9">node</span><span style="color:#27aeae">.importantShops</span> { <span style="color:#7f8c8d">color</span>: <span style="color:#f44f4f">"red"</span>; }
<span style="color:#2980b9">way</span><span style="color:#27aeae">.importantShops</span>|<span style="color:#3f8058">z20-</span> { <span style="color:#7f8c8d">color</span>: <span style="color:#f44f4f">"green"</span>; }
<span style="color:#2980b9">*</span><span style="color:#27aeae">.importantShops</span>[access=no] { <span style="color:#7f8c8d">color</span>: <span style="color:#f44f4f">"blue"</span>; }
<span style="color:#7a7c7d">// layer selectors (see https://wiki.openstreetmap.org/wiki/MapCSS/0.2/Proposal_layer_selector)</span>
<span style="color:#2980b9">way</span>[highway]<span style="color:#fdbc4b;font-weight:bold">::road</span> {
<span style="color:#7f8c8d">width</span>: <span style="color:#f67400">8</span>;
<span style="color:#7f8c8d">color</span>: <span style="color:#f67400">#ffffff</span>;
<span style="color:#7f8c8d">casing-width</span>: <span style="color:#f67400">2</span>;
<span style="color:#7f8c8d">casing-color</span>: <span style="color:#f67400">#a0a0a0</span>;
}
<span style="color:#2980b9">way</span>[railway=tram]<span style="color:#fdbc4b;font-weight:bold">::tram</span> {
<span style="color:#7f8c8d">width</span>: <span style="color:#f67400">2</span>;
<span style="color:#7f8c8d">color</span>: <span style="color:#f67400">#303030</span>;
<span style="color:#7f8c8d">z-index</span>: <span style="color:#f67400">1</span>;
}
<span style="color:#7a7c7d">// default layer selector</span>
<span style="color:#2980b9">node</span><span style="color:#fdbc4b;font-weight:bold">::default</span> {
<span style="color:#7f8c8d">icon-image</span>: <span style="color:#f44f4f">"bla"</span>;
}
<span style="color:#7a7c7d">//quoted values in conditions</span>
<span style="color:#2980b9">line</span>|<span style="color:#3f8058">z16-</span>[highway=service][service=<span style="color:#f44f4f">"drive-through"</span>] {
<span style="font-weight:bold">set</span> <span style="color:#27aeae">.service</span>;
<span style="color:#7f8c8d">width</span>: <span style="color:#f67400">1.5</span><span style="font-weight:bold">m</span>;
}
<span style="color:#7a7c7d">// single quote strings</span>
<span style="color:#2980b9">*</span>[service=<span style="color:#f44f4f">'drive-through'</span>] {
<span style="color:#7f8c8d">text</span>: <span style="color:#f44f4f">'abc</span><span style="color:#3daee9">\'</span><span style="color:#f44f4f">def"ghi</span><span style="color:#3daee9">\n</span><span style="color:#f44f4f">jkl'</span>;
}
</pre></body></html>
|