Cartographic Styling

Advanced layer styling tools are available for all datasets uploaded to SeaSketch. All cartography displayed in the application is defined using the mapbox-gl-style specification. Until recently, all styles were authored in a code editor using this language. Now, SeaSketch offers both a code editor and a new graphical cartography interface which creates these style layers for you.

Graphical Style Editor

Here a layer is represented by a categorical fill visualization. An administrator can use the selected dropdown to change visualization types to different display options.

When viewing the Style section of the layer editor, you will be first presented with the graphical cartography editor. After uploading a layer, SeaSketch will attempt to determine the best visualization type for that layer based on inspection of its attributes. If you would like to change the overall visualization type used to present the layer, click on the first dropdown and you will be presented with options that are suitable for the vector geometry type or raster format of that data source. Such options may include:

• Simple displays, such as a single colored polygon, line, or circle

• Categorical styles, which color polygons or pixels based on an attribute

• Color Range options which display a color scale based on a numeric attribute

• Heatmaps to display the density of points

• RGB Image display for rasters

Each visualization type includes its own unique configuration. In most cases settings that may be unclear will contain additional help tooltips which can be revealed by hovering over the info button.

Changing the visualized attribute

Here, the field used to categorize polygons can be changed

In all but the simplest visualization options, you can usually change the attribute used to categorize or otherwise visualize the data layer. SeaSketch summarizes attribute values and shows example values in the dropdown menu for reference. You can also use the toolbar to select View > Open layer property details to see information on all attributes found in the data layer.

Customizing the legend

By default, SeaSketch uses column names and values from the visualized column to render the legend. Often these values have odd capitalization or are short codes which may be hard for users to interpret. You can use the text fields in the visualization configuration to customize the legend with more appropriate labels.

Undo and Redo

Using the toolbar Edit menu, or by using Control+Z and Control+Shift+Z, you can undo and redo all changes to a style. This includes both the graphical and code editors. Please experiment with styles freely knowing you can always undo your changes. Just be mindful that you will lose this command history upon closing the layer editor.

Remember, changes to these settings will only be updated after Publishing Changes

Using the Code Editor

Some tools use code to define cartography, which offers great flexibility but is hard to use and learn. Others provide graphical editors which are easy to use but cannot possibly cover all use cases. SeaSketch attempts to marry these two approaches in order to have an easy to use tool that covers 90% of needs, but also provides a code editor for advanced users who want to have complete control of how layers are displayed. All styles authored in the graphical editor are translated to code, and the graphical editor attempts to interpret styles edited in the code editor.

Our team often starts in the graphical editor and switches to the code editor to make some final tweaks to get the exact results we'd like in complex cases. For example, the graphical editor does not currently support zoom-dependent styles. For now, the code editor can be used to address this need when it arrises.

Use the switch at the top of the style editor to switch to the code editor.

The language used for cartography is the mapbox-gl-styles specification. MapBox has a great deal of high quality documentation which you can use to learn this json-based language.

SeaSketch's code editor understands this specification and will validate all input. You will see red underlining of invalid values and code, which can be hovered over to see specific error messages. Styles containing invalid code will not be saved until corrected.

The style editor has an advanced understanding of both the mapbox style specification and your layer's metadata, and so can provide helpful autocompletion suggestions and inline documentation. Often these suggestions will automatically appear as you type, but they can also be triggered by pressing Control+Space. Hovering over a style property will also bring up a documentation tooltip.

Here a tooltip is suggesting style props. These are filtered to those which are appropriate for the "paint" settings of a fill layer

When creating a data-driven style using a ["get", "column-name"] expression, the code editor will give suggestions based on the columns found in the current data layer, along with their data type. Autocompleting these column names is a much faster and less error-prone way of defining these styles.