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