<% var sections = { map: { icon: 'globe', map: symbolizers.map, }, points: { icon: 'marker', markers: symbolizers.markers, point: symbolizers.point }, lines: { icon: 'polyline', line: symbolizers.line, 'line-pattern': symbolizers['line-pattern'] }, polygons: { icon: 'polygon', polygon: symbolizers.polygon, 'polygon-pattern': symbolizers['polygon-pattern'], building: symbolizers['building'] }, raster: { icon: 'raster', raster: symbolizers.raster, }, text: { icon: 'font', text: symbolizers.text, shield: symbolizers.shield }, misc: { icon: 'star', misc: symbolizers['*'], debug: symbolizers.debug } }; %>
Studio Guide Interface tour

Override shortcuts by holding Shift.

<% _(sections).each(function(symbolizers, name) { %>
' class='small'>
<%= name %>
<% _(symbolizers).each(function(symbolizer) { %> <% _(symbolizer).chain() .filter(function(p) { return p.css; }) .each(function(p, name) { %>
' class='contain carto-ref'> ' class='js-tab pin-left pin-right js-tab'>
<%= p.css %>
<%=_(p.type).isArray() ? 'keyword' : p.type%>
Default:
<% if (!(p['default-value'] === '')) { %> <%= p['css'] %>: <%=p['default-value']%>; <% } else { %> no default value <% } %>
<% if (_(p.type).isArray()) { %>
Options:
<% _(p.type).each(function(option, i) { %> <%= option %> <% }); %>
<% } %> <% if (p.type==='uri') { %> <% var exampleuri = 'url("image.png")'; if (p.css === 'font-directory') exampleuri = 'url("fonts/")'; %>
Example:
<%= p['css'] %>: <%= exampleuri %>;
<% } %> <% if (p.type==='numbers') { %>
Example:
<%= p['css'] %>: 2,2; <% } %> <% if (p.type==='color') { %>
Examples:
<%= p['css'] %>: #ffff00; <%= p['css'] %>: rgb(255, 255, 0); <%= p['css'] %>: rgba(255, 255, 0, 1); <%= p['css'] %>: hsl(100, 50%, 50%); <%= p['css'] %>: yellow;
<% } %> <% if (p.functions) { %>
Examples:
<% _(p.functions).each(function(option, i) { %> <%= p['css'] %>:<%= option[0] %>(<% if (option[0] === 'colorize-alpha') { %>blue, yellow, red<% } else if (option[0] === 'color-to-alpha') { %>blue<% } else { %><% for (var i=0;i2<%= (option[1]===(i+1)) ? '' : ',' %><% } %><% } %>); <% }); %>
<% }; %>
<% if (p.doc) { %>
<%=p.doc%>
<% } %> <% if (p.expression===true) { %> <% var property = '[some_field]'; if (p.type === 'uri') property = 'url("[some_field].svg")'; if (p.type === 'functions') { property = p.functions[0][0] + '([some_field])'; } %>
Accepts expressions: You can pass values from your data source to this property:
<%= p['css'] %>: <%= property%>;
<% } %>
<% }); %> <% }); %>
<% }); %>