%
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
- s Save.
- alt+s Export image.
- r Refresh map.
- . View map.
- \ View settings.
- / View help.
- p View places.
- b Save bookmark.
- i View data.
- alt+[1-9] Switch active stylesheet.
- f Search current stylesheet.
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;i
<% }); %>
<% }; %>
<% 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%>;
<% } %>
<% }); %>
<% }); %>
<% }); %>