File indexing completed on 2024-05-12 04:02:07

0001 <!DOCTYPE html>
0002 <html><head>
0003 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
0004 <title>highlight.mapcss</title>
0005 <meta name="generator" content="KF5::SyntaxHighlighting - Definition (MapCSS) - Theme (Breeze Light)"/>
0006 </head><body style="background-color:#ffffff;color:#1f1c1b"><pre>
0007 <span style="color:#898887">/*</span>
0008 <span style="color:#898887"> * </span><span style="color:#ca60ca;font-style:italic">SPDX-FileCopyrightText:</span><span style="color:#898887"> 2022 Volker Krause &lt;vkrause@kde.org></span>
0009 <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>
0010 <span style="color:#898887"> */</span>
0011 
0012 <span style="color:#898887">// samples taken from kosmindoormap MapCSS parser unit tests</span>
0013 
0014 <span style="font-weight:bold">@import</span> <span style="color:#644a9b">url</span>(<span style="color:#bf0303">"included.mapcss"</span>);
0015 
0016 <span style="color:#898887">// union selector</span>
0017 <span style="color:#0057ae">area</span>[railway=platform],
0018 <span style="color:#0057ae">relation</span>[type=multipolygon][railway=platform]
0019 {
0020     <span style="color:#644a9b;font-weight:bold">color</span>: <span style="color:#b08000">#ff550022</span>;
0021     <span style="color:#644a9b;font-weight:bold">fill-color</span>: <span style="color:#b08000">#80f0e0d0</span>;
0022 }
0023 
0024 <span style="color:#898887">// chained selector</span>
0025 <span style="color:#0057ae">area</span>[railway=platform] <span style="color:#0057ae">node</span>[sign]
0026 {
0027     <span style="color:#644a9b;font-weight:bold">fill-color</span>: <span style="color:#b08000">#ff0000</span>;
0028     <span style="color:#644a9b;font-weight:bold">opacity</span>: <span style="color:#b08000">0.5</span>;
0029 }
0030 
0031 <span style="color:#898887">// condition with colon-separated keys</span>
0032 <span style="color:#0057ae">node</span>[building:part][building:part=elevator]
0033 {
0034     <span style="color:#644a9b;font-weight:bold">opacity</span>: <span style="color:#b08000">1</span>;
0035     <span style="color:#644a9b;font-weight:bold">color</span>: building:color;
0036 }
0037 
0038 <span style="color:#898887">// text properties</span>
0039 <span style="color:#0057ae">*</span> {
0040     <span style="color:#644a9b;font-weight:bold">text</span>: ref;
0041     <span style="color:#644a9b;font-weight:bold">text-color</span>: <span style="color:#b08000">#ff00ff</span>;
0042 }
0043 
0044 <span style="color:#898887">// line properties</span>
0045 <span style="color:#0057ae">line</span> {
0046     <span style="color:#644a9b;font-weight:bold">dashes</span>: <span style="color:#b08000">3</span>,<span style="color:#b08000">5</span>;
0047     <span style="color:#644a9b;font-weight:bold">linecap</span>: <span style="color:#aa5500">round</span>;
0048     <span style="color:#644a9b;font-weight:bold">linejoin</span>: <span style="color:#aa5500">bevel</span>;
0049     <span style="color:#644a9b;font-weight:bold">casing-width</span>: <span style="color:#b08000">1</span>;
0050     <span style="color:#644a9b;font-weight:bold">casing-color</span>: <span style="color:#b08000">#444444</span>;
0051     <span style="color:#644a9b;font-weight:bold">casing-dashes</span>: <span style="color:#b08000">1</span>,<span style="color:#b08000">1</span>;
0052 }
0053 
0054 <span style="color:#898887">// zoom ranges</span>
0055 <span style="color:#0057ae">node</span>|<span style="color:#ca60ca">z12-13</span> {}
0056 <span style="color:#0057ae">node</span>|<span style="color:#ca60ca">z10</span> {}
0057 <span style="color:#0057ae">node</span>|<span style="color:#ca60ca">z-10</span> {}
0058 <span style="color:#0057ae">node</span>|<span style="color:#ca60ca">z10-</span> {}
0059 <span style="color:#0057ae">node</span>|<span style="color:#ca60ca">z12-13</span>[name] {}
0060 <span style="color:#0057ae">node</span>|<span style="color:#ca60ca">z14-</span>[name] {}
0061 
0062 <span style="color:#898887">// numeric comparison conditions</span>
0063 <span style="color:#0057ae">*</span> [layer><span style="color:#b08000">1</span>],
0064 <span style="color:#0057ae">*</span> [layer&lt;<span style="color:#b08000">2</span>],
0065 <span style="color:#0057ae">*</span> [layer>=<span style="color:#b08000">3</span>],
0066 <span style="color:#0057ae">*</span> [layer&lt;=<span style="color:#b08000">4</span>] {}
0067 
0068 <span style="color:#898887">// object types as tag or property values</span>
0069 <span style="color:#0057ae">area</span>[indoor=area] {
0070     <span style="color:#644a9b;font-weight:bold">text-position</span>: <span style="color:#aa5500">line</span>;
0071     <span style="color:#644a9b;font-weight:bold">width</span>: width;
0072 }
0073 
0074 <span style="color:#898887">// units</span>
0075 <span style="color:#0057ae">*</span> {
0076     <span style="color:#644a9b;font-weight:bold">font-size</span>: <span style="color:#b08000">16</span><span style="font-weight:bold">pt</span>;
0077     <span style="color:#644a9b;font-weight:bold">width</span>: <span style="color:#b08000">42</span><span style="font-weight:bold">px</span>;
0078     <span style="color:#644a9b;font-weight:bold">casing-width</span>: <span style="color:#b08000">2</span><span style="font-weight:bold">m</span>;
0079 }
0080 
0081 <span style="color:#898887">// negative numbers</span>
0082 <span style="color:#0057ae">*</span> {
0083     <span style="color:#644a9b;font-weight:bold">width</span>: -<span style="color:#b08000">10.42</span>;
0084 }
0085 
0086 
0087 <span style="color:#898887">// colors</span>
0088 <span style="color:#0057ae">*</span> {
0089     <span style="color:#644a9b;font-weight:bold">text-color</span>: <span style="color:#b08000">#aabbcc</span>;
0090     <span style="color:#644a9b;font-weight:bold">fill-color</span>: <span style="color:#b08000">#80ccbbaa</span>;
0091     <span style="color:#644a9b;font-weight:bold">casing-color</span>: <span style="color:#b08000">#123</span>;
0092     <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>);
0093     <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>);
0094     <span style="color:#644a9b;font-weight:bold">color</span>: <span style="color:#bf0303">"red"</span>;
0095 }
0096 
0097 <span style="color:#898887">// set tag</span>
0098 <span style="color:#0057ae">node</span>[shop=bakery] {
0099     <span style="font-weight:bold">set</span> mx:important;
0100 }
0101 
0102 <span style="color:#898887">// set tag to a specific value</span>
0103 <span style="color:#0057ae">area</span>[shop=bakery] {
0104     <span style="font-weight:bold">set</span> mx:importance = <span style="color:#bf0303">"high"</span>;
0105     <span style="font-weight:bold">set</span> mx:importance = 20;
0106 }
0107 
0108 <span style="color:#898887">// set class</span>
0109 <span style="color:#0057ae">node</span>[shop=bakery],
0110 <span style="color:#0057ae">node</span>[shop=pastry]
0111 {
0112     <span style="font-weight:bold">set</span> <span style="color:#0057ae">.importantShops</span>;
0113 }
0114 
0115 <span style="color:#898887">// class selectors</span>
0116 <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>; }
0117 <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>; }
0118 <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>; }
0119 
0120 <span style="color:#898887">// layer selectors (see https://wiki.openstreetmap.org/wiki/MapCSS/0.2/Proposal_layer_selector)</span>
0121 <span style="color:#0057ae">way</span>[highway]<span style="font-weight:bold">::road</span> {
0122   <span style="color:#644a9b;font-weight:bold">width</span>: <span style="color:#b08000">8</span>;
0123   <span style="color:#644a9b;font-weight:bold">color</span>: <span style="color:#b08000">#ffffff</span>;
0124   <span style="color:#644a9b;font-weight:bold">casing-width</span>: <span style="color:#b08000">2</span>;
0125   <span style="color:#644a9b;font-weight:bold">casing-color</span>: <span style="color:#b08000">#a0a0a0</span>;
0126 }
0127 <span style="color:#0057ae">way</span>[railway=tram]<span style="font-weight:bold">::tram</span> {
0128   <span style="color:#644a9b;font-weight:bold">width</span>: <span style="color:#b08000">2</span>;
0129   <span style="color:#644a9b;font-weight:bold">color</span>: <span style="color:#b08000">#303030</span>;
0130   <span style="color:#644a9b;font-weight:bold">z-index</span>: <span style="color:#b08000">1</span>;
0131 }
0132 <span style="color:#898887">// default layer selector</span>
0133 <span style="color:#0057ae">node</span><span style="font-weight:bold">::default</span> {
0134     <span style="color:#644a9b;font-weight:bold">icon-image</span>: <span style="color:#bf0303">"bla"</span>;
0135 }
0136 
0137 <span style="color:#898887">//quoted values in conditions</span>
0138 <span style="color:#0057ae">line</span>|<span style="color:#ca60ca">z16-</span>[highway=service][service=<span style="color:#bf0303">"drive-through"</span>] {
0139     <span style="font-weight:bold">set</span> <span style="color:#0057ae">.service</span>;
0140     <span style="color:#644a9b;font-weight:bold">width</span>: <span style="color:#b08000">1.5</span><span style="font-weight:bold">m</span>;
0141 }
0142 </pre></body></html>