Publish Data

  1. Home
  2. Publish Data
  3. Add styles to data using CartoCSS

Add styles to data using CartoCSS

CartoCSS is a syntax that lets you add styles to geospatial data layers, customizing the appearance of your data. In this guide, we introduce how to add CartoCSS to a layer, and provide some tips for using CartoCSS within your Koordinates data service. For ease of reference, further documentation — including a list of CartoCSS properties — is published within the Koordinates CartoCSS application.

1

Navigate to your chosen layer or set

2

Click the Services tab

3

Select New Style

4

Add a name and description for your style

After clicking Save, this will be an additional option under Styles.

5

Click 'Open Style Cartography Editor'

This option is represented by the symbol of a globe, and can be found under Actions. 

6

Add your new CartoCSS style in the right pane

Changes will be previewed in the left pane. 

7

Click Save and Close

Don't worry—your style won't be published to users just yet.  

8

Click 'Generate and Publish Style' and confirm publication

This is represented by a symbol of a flag, and can be found under Actions.

After you confirm publication, you will see a yellow 'Generating' message under Status. This will be replaced by a green 'Active' message when the publication of your style is complete. 

Set a new default style

To change the default style for a layer, simply click the relevant radio button under Default (see screenshot, below). The default style will be used to represent the layer in your Koordinates data service. For this reason, we recommend caution when setting defaults, as new styles may make it difficult to overlay multiple layers. 

Create new styles for a set

The process is the same as creating new styles for a layer. Simply navigate to the Services tab for your chosen set, and follow the instructions, above.

Please note that the top layer in your CartoCSS style definition will be the bottom layer when drawn in the map. In the example, below, layer 7328 will be painted below layer 7344.  

Select font used for your style

You can find a range of supported fonts by clicking the 'A' on the bottom left of the CartoCSS app.

Access reference documentation on CartoCSS styling

You can find reference documentation on available style attributes and syntax by clicking the curling brackets on the bottom left of the CartoCSS app.