carto
Version:
Mapnik Stylesheet Compiler
340 lines (235 loc) • 15.8 kB
HTML
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styling Concepts — carto documentation</title>
<link rel="stylesheet" href="_static/css/theme.css" type="text/css" />
<link rel="index" title="Index"
href="genindex.html"/>
<link rel="search" title="Search" href="search.html"/>
<link rel="top" title="carto documentation" href="index.html"/>
<link rel="next" title="Mapnik API documentation" href="mapnik_api.html"/>
<link rel="prev" title="Language Elements" href="language_elements.html"/>
<script src="_static/js/modernizr.min.js"></script>
</head>
<body class="wy-body-for-nav" role="document">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-scroll">
<div class="wy-side-nav-search">
<a href="index.html" class="icon icon-home"> carto
</a>
<div role="search">
<form id="rtd-search-form" class="wy-form" action="search.html" method="get">
<input type="text" name="q" placeholder="Search docs" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
</div>
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
<p class="caption"><span class="caption-text">Contents:</span></p>
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="installation_usage.html">Installation & Usage</a></li>
<li class="toctree-l1"><a class="reference internal" href="language_elements.html">Language Elements</a></li>
<li class="toctree-l1 current"><a class="current reference internal" href="#">Styling Concepts</a><ul>
<li class="toctree-l2"><a class="reference internal" href="#attachments-and-instances">Attachments and Instances</a></li>
<li class="toctree-l2"><a class="reference internal" href="#variables-expressions">Variables & Expressions</a></li>
<li class="toctree-l2"><a class="reference internal" href="#nested-styles">Nested Styles</a></li>
<li class="toctree-l2"><a class="reference internal" href="#fontsets">FontSets</a></li>
<li class="toctree-l2"><a class="reference internal" href="#filters">Filters</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="mapnik_api.html">Mapnik API documentation</a></li>
</ul>
</div>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
<nav class="wy-nav-top" role="navigation" aria-label="top navigation">
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="index.html">carto</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="breadcrumbs navigation">
<ul class="wy-breadcrumbs">
<li><a href="index.html">Docs</a> »</li>
<li>Styling Concepts</li>
<li class="wy-breadcrumbs-aside">
<a href="_sources/styling_concepts.rst.txt" rel="nofollow"> View page source</a>
</li>
</ul>
<hr/>
</div>
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
<div itemprop="articleBody">
<div class="section" id="styling-concepts">
<h1>Styling Concepts<a class="headerlink" href="#styling-concepts" title="Permalink to this headline">¶</a></h1>
<div class="section" id="attachments-and-instances">
<h2>Attachments and Instances<a class="headerlink" href="#attachments-and-instances" title="Permalink to this headline">¶</a></h2>
<p>In CSS, a certain object can only have one instance of a property. A <code class="docutils literal"><span class="pre"><div></span></code> has a specific border width and color,
rules that match better than others (#id instead of .class) override previous definitions.
CartoCSS acts the same way normally for the sake of familiarity and organization, but Mapnik itself is more powerful.</p>
<p>Layers in Mapnik can have multiple <a class="reference external" href="https://github.com/mapnik/mapnik/wiki/LineSymbolizer">borders</a> and multiple copies
of other attributes. This ability is useful in drawing line outlines, like in the case of road borders or ‘glow’ effects around coasts.
CartoCSS makes this accessible by allowing attachments to styles:</p>
<div class="highlight-default"><div class="highlight"><pre><span class="c1">#world {</span>
<span class="n">line</span><span class="o">-</span><span class="n">color</span><span class="p">:</span> <span class="c1">#fff;</span>
<span class="n">line</span><span class="o">-</span><span class="n">width</span><span class="p">:</span> <span class="mi">3</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">#world::outline {</span>
<span class="n">line</span><span class="o">-</span><span class="n">color</span><span class="p">:</span> <span class="c1">#000;</span>
<span class="n">line</span><span class="o">-</span><span class="n">width</span><span class="p">:</span> <span class="mi">6</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
<p>Attachments are optional.</p>
<p>While attachments allow creating implicit “layers” with the same data, using <strong>instances</strong>
allows you to create multiple symbolizers in the same style/layer:</p>
<div class="highlight-default"><div class="highlight"><pre><span class="c1">#roads {</span>
<span class="n">casing</span><span class="o">/</span><span class="n">line</span><span class="o">-</span><span class="n">width</span><span class="p">:</span> <span class="mi">6</span><span class="p">;</span>
<span class="n">casing</span><span class="o">/</span><span class="n">line</span><span class="o">-</span><span class="n">color</span><span class="p">:</span> <span class="c1">#333;</span>
<span class="n">line</span><span class="o">-</span><span class="n">width</span><span class="p">:</span> <span class="mi">4</span><span class="p">;</span>
<span class="n">line</span><span class="o">-</span><span class="n">color</span><span class="p">:</span> <span class="c1">#666;</span>
<span class="p">}</span>
</pre></div>
</div>
<p>This makes Mapnik first draw the line of color #333 with a width of 6, and then immediately afterwards,
it draws the same line again with width 4 and color #666. Contrast that to attachments:
Mapnik would first draw all casings before proceeding to the actual lines.</p>
</div>
<div class="section" id="variables-expressions">
<h2>Variables & Expressions<a class="headerlink" href="#variables-expressions" title="Permalink to this headline">¶</a></h2>
<p>CartoCSS inherits from its basis in <a class="reference external" href="http://lesscss.org/">LessCSS</a> some new features in CSS.
One can define variables in stylesheets, and use expressions to modify them.</p>
<div class="highlight-default"><div class="highlight"><pre><span class="nd">@mybackground</span><span class="p">:</span> <span class="c1">#2B4D2D;</span>
<span class="n">Map</span> <span class="p">{</span>
<span class="n">background</span><span class="o">-</span><span class="n">color</span><span class="p">:</span> <span class="nd">@mybackground</span>
<span class="p">}</span>
<span class="c1">#world {</span>
<span class="n">polygon</span><span class="o">-</span><span class="n">fill</span><span class="p">:</span> <span class="nd">@mybackground</span> <span class="o">+</span> <span class="c1">#222;</span>
<span class="n">line</span><span class="o">-</span><span class="n">color</span><span class="p">:</span> <span class="n">darken</span><span class="p">(</span><span class="nd">@mybackground</span><span class="p">,</span> <span class="mi">10</span><span class="o">%</span><span class="p">);</span>
<span class="p">}</span>
</pre></div>
</div>
</div>
<div class="section" id="nested-styles">
<h2>Nested Styles<a class="headerlink" href="#nested-styles" title="Permalink to this headline">¶</a></h2>
<p>CartoCSS also inherits nesting of rules from LessCSS.</p>
<div class="highlight-default"><div class="highlight"><pre>/* Applies to all layers with .land class */
.land {
line-color: #ccc;
line-width: 0.5;
polygon-fill: #eee;
/* Applies to #lakes.land */
#lakes {
polygon-fill: #000;
}
}
</pre></div>
</div>
<p>This can be a convenient way to group style changes by zoom level:</p>
<div class="highlight-default"><div class="highlight"><pre><span class="p">[</span><span class="n">zoom</span> <span class="o">></span> <span class="mi">1</span><span class="p">]</span> <span class="p">{</span>
<span class="o">/*</span> <span class="n">Applies</span> <span class="n">to</span> <span class="nb">all</span> <span class="n">layers</span> <span class="n">at</span> <span class="n">zoom</span> <span class="o">></span> <span class="mi">1</span> <span class="o">*/</span>
<span class="n">polygon</span><span class="o">-</span><span class="n">gamma</span><span class="p">:</span> <span class="mf">0.3</span><span class="p">;</span>
<span class="c1">#world {</span>
<span class="n">polygon</span><span class="o">-</span><span class="n">fill</span><span class="p">:</span> <span class="c1">#323;</span>
<span class="p">}</span>
<span class="c1">#lakes {</span>
<span class="n">polygon</span><span class="o">-</span><span class="n">fill</span><span class="p">:</span> <span class="c1">#144;</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
</div>
<div class="section" id="fontsets">
<h2>FontSets<a class="headerlink" href="#fontsets" title="Permalink to this headline">¶</a></h2>
<p>By defining multiple fonts in a <code class="docutils literal"><span class="pre">text-face-name</span></code> definition, you create <a class="reference external" href="https://github.com/mapnik/mapnik/wiki/FontSet">FontSets</a>
in CartoCSS. These are useful for supporting multiple character sets and fallback fonts for distributed styles.</p>
<p>This CartoCSS code</p>
<div class="highlight-default"><div class="highlight"><pre><span class="c1">#world {</span>
<span class="n">text</span><span class="o">-</span><span class="n">name</span><span class="p">:</span> <span class="s2">"[NAME]"</span><span class="p">;</span>
<span class="n">text</span><span class="o">-</span><span class="n">size</span><span class="p">:</span> <span class="mi">11</span><span class="p">;</span>
<span class="n">text</span><span class="o">-</span><span class="n">face</span><span class="o">-</span><span class="n">name</span><span class="p">:</span> <span class="s2">"Georgia Regular"</span><span class="p">,</span> <span class="s2">"Arial Italic"</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
<p>becomes this XML code</p>
<div class="highlight-default"><div class="highlight"><pre><span class="o"><</span><span class="n">FontSet</span> <span class="n">name</span><span class="o">=</span><span class="s2">"fontset-0"</span><span class="o">></span>
<span class="o"><</span><span class="n">Font</span> <span class="n">face</span><span class="o">-</span><span class="n">name</span><span class="o">=</span><span class="s2">"Georgia Regular"</span><span class="o">></span>
<span class="o"><</span><span class="n">Font</span> <span class="n">face</span><span class="o">-</span><span class="n">name</span><span class="o">=</span><span class="s2">"Arial Italic"</span><span class="o">></span>
<span class="o"></</span><span class="n">FontSet</span><span class="o">></span>
<span class="o"><</span><span class="n">Style</span> <span class="n">name</span><span class="o">=</span><span class="s2">"world-text"</span><span class="o">></span>
<span class="o"><</span><span class="n">Rule</span><span class="o">></span>
<span class="o"><</span><span class="n">TextSymbolizer</span> <span class="n">fontset</span><span class="o">-</span><span class="n">name</span><span class="o">=</span><span class="s2">"fontset-0"</span>
<span class="n">size</span><span class="o">=</span><span class="s2">"11"</span>
<span class="n">name</span><span class="o">=</span><span class="s2">"[NAME]"</span><span class="o">></span>
<span class="o"></</span><span class="n">Rule</span><span class="o">></span>
<span class="o"></</span><span class="n">Style</span><span class="o">></span>
</pre></div>
</div>
</div>
<div class="section" id="filters">
<h2>Filters<a class="headerlink" href="#filters" title="Permalink to this headline">¶</a></h2>
<p>CartoCSS supports a variety of filter styles:</p>
<p>Numeric comparisons:</p>
<div class="highlight-default"><div class="highlight"><pre><span class="c1">#world[population > 100]</span>
<span class="c1">#world[population < 100]</span>
<span class="c1">#world[population >= 100]</span>
<span class="c1">#world[population <= 100]</span>
</pre></div>
</div>
<p>General comparisons:</p>
<div class="highlight-default"><div class="highlight"><pre><span class="c1">#world[population = 100]</span>
<span class="c1">#world[population != 100]</span>
</pre></div>
</div>
<p>String comparisons:</p>
<div class="highlight-default"><div class="highlight"><pre><span class="o">/*</span> <span class="n">a</span> <span class="n">regular</span> <span class="n">expression</span> <span class="n">over</span> <span class="n">name</span> <span class="o">*/</span>
<span class="c1">#world[name =~ "A.*"]</span>
</pre></div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
<a href="mapnik_api.html" class="btn btn-neutral float-right" title="Mapnik API documentation" accesskey="n">Next <span class="fa fa-arrow-circle-right"></span></a>
<a href="language_elements.html" class="btn btn-neutral" title="Language Elements" accesskey="p"><span class="fa fa-arrow-circle-left"></span> Previous</a>
</div>
<hr/>
<div role="contentinfo">
<p>
© Copyright 2017, Carto contributors.
</p>
</div>
Built with <a href="http://sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/snide/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>.
</footer>
</div>
</div>
</section>
</div>
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT:'./',
VERSION:'',
COLLAPSE_INDEX:false,
FILE_SUFFIX:'.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<script type="text/javascript" src="_static/js/theme.js"></script>
<script type="text/javascript">
jQuery(function () {
SphinxRtdTheme.StickyNav.enable();
});
</script>
</body>
</html>