# Cartographic Styling Advanced layer styling tools are available for all datasets [uploaded to SeaSketch](/seasketch-documentation/administrators-guide/overlay-layers/uploading-spatial-data.md). All cartography displayed in the application is defined using the [mapbox-gl-style specification](https://github.com/mapbox/mapbox-gl-styles). 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. {% hint style="info" %} Remember, changes to these settings will only be updated after [Publishing Changes](/seasketch-documentation/administrators-guide/overlay-layers/publishing-changes.md) {% endhint %} ### 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](https://github.com/mapbox/mapbox-gl-styles). MapBox has a great deal of [high quality documentation](https://docs.mapbox.com/mapbox-gl-js/guides/styles/) 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](https://docs.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/) 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.
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.seasketch.org/seasketch-documentation/administrators-guide/overlay-layers/cartographic-styling.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.