Layer Styling

Layer styles control how map features are visually presented. You can apply styles to any sublayer, allowing you to customize the appearance of your data for different use cases. The Layer Styling tab provides tools to:

• Set style properties such as color, opacity, and geometry type (e.g., line, fill, symbol)
• Target specific features using filters or attribute values
• Adjust styles for different zoom levels
• Use the Style Wizard for guided style creation
• Keep styles automatically updated with the source, or customize them as needed

You can select from various style types, including Background, Circle, Fill, Fill Extrusion, Line, Raster, Symbol, or Shape. Styles can be managed and reordered to control their rendering order on the map.

Layer Coordinate Configuration

Before applying styles to your layer, you need to configure the essential field mappings that enable proper positioning and identification of features on the map:

Field	Description	Purpose
ID Field	Select the unique identifier field for each feature	Used to uniquely identify and track individual features for styling and interaction purposes
Latitude Field	Select the field containing latitude coordinates	Specifies the north-south position for placing features correctly on the map
Longitude Field	Select the field containing longitude coordinates	Specifies the east-west position for placing features correctly on the map

Important

These field mappings are essential for the layer to function properly. The ID field ensures each feature can be uniquely identified, while the latitude and longitude fields are used to apply the feature styles to the correct locations within the map.

Managing Layer Styles

1. Review styles in the styles list.

2. Enable Auto-Update: Turn on Always use latest styles to keep the style sheet synced with the source.

3. Customize styles: To edit styles, ensure Always use latest styles is off. You can then add, edit, clone, move, or delete styles.

4. Style Actions:

   Feature	Description
   Edit	Edit properties of this style
   Clone	Duplicate the current style and its properties
   Move Up and Move Down	Change the rendering order (z-index) of styles; higher styles appear above lower ones
   Delete	Remove the style from the layer

5. Edit style properties: Click the Edit icon to adjust style details:

   Feature	Description
   Legend Name	Name shown in the map legend
   Min and Max zoom	Set the zoom range for this style
   Filters	Define which features this style applies to
   Styles	Adjust the relate style controls for that style type

6. Save or Reset: Click Save Style to apply changes. Use Reset to revert to the original style, or Advanced Style Editor for direct JSON editing.

   Field	Description
   Reset	Reverts all customized styling back to the original state.
   Advanced Style Editor	Directly edit the style JSON for advanced customization.

---

Create a Layer Style

The New Style Wizard provides an intuitive interface for creating and applying new styles to your layers. Each style type has its own specific configuration options and use cases.

To use the Style Wizard

1. Add or edit a layer in the Layer Gallery.

2. Go to the Features tab and select the layer you want to style.

3. Open Layer Styles and click New Style Wizard.

4. Configure the common style properties and select your style type.

Common Style Configuration

Every style in the wizard includes these essential configuration fields on the left side:

Field	Description	Purpose
Style Type	Dropdown to select the type of visualization	Determines which styling options are available (circle, fill, line, etc.)
Legend Name	Display name for this style in the map legend	Helps users identify what this style represents
Min Zoom	Minimum zoom level where this style is visible	Controls when the style appears as users zoom in
Max Zoom	Maximum zoom level where this style is visible	Controls when the style disappears as users zoom out
Filter	Conditional logic to control which features use this style	Allows targeting specific data based on field values

Filter Configuration

The Filter section allows you to create conditional styling based on your data:

Component	Description
Field	Select which data field to evaluate
Comparison	Choose comparison operator (Equals, Greater Than, Less Than, etc.)
Value	Enter the value to compare against
Action	Add or remove filter conditions
Match All	Determines if ALL conditions must be true or ANY condition

Filter Examples:

• Show red circles only for records where Status = "Critical"
• Display larger symbols for records where Priority > 5
• Hide features where Date < "2024-01-01"

Style Types Overview

Each style type serves different visualization purposes and has unique configuration options:

Style Type	Best Used For	Key Features
Cluster	Point data with high density	Groups nearby points, shows count, customizable radius and zoom levels
Circle	Point data with size variation	Radius-based sizing, color coding, opacity control
Fill	Polygon areas	Solid color fills, opacity, border styling
Line	Linear features	Stroke width, color, dash patterns
Symbol	Categorized point data	Icon selection, size scaling, rotation
Shape	Custom geometries	User-drawn shapes, custom styling
Background	Base layers	Map backgrounds, tile layers
Fill Extrusion	3D polygon visualization	Height-based extrusion, 3D effects
Raster	Image/satellite data	Image overlays, opacity blending

Style Type Configuration

Cluster Style

Perfect for visualizing high-density point data by grouping nearby features into clusters.

Configuration Options:

• Cluster Max Zoom: Maximum zoom level where clustering occurs
• Cluster Radius: Distance (in pixels) for grouping points into clusters
• Cluster Font Size: Text size for cluster count display
• Cluster Font Color: Color of the cluster count text
• Cluster Style Config: Define different visual styles based on point count ranges

Circle Style

Displays point features as circles with customizable size and appearance.

Configuration Options:

• circle-radius: Size of the circle (in pixels or data-driven)
• circle-color: Fill color of the circle
• circle-opacity: Transparency level (0-1)
• circle-stroke-width: Width of the circle border
• circle-stroke-color: Color of the circle border
• circle-stroke-opacity: Transparency of the border

Background Style

Sets background colors or patterns for map layers.

Configuration Options:

• background-color: Background color for the layer
• background-opacity: Transparency of the background

Fill Style

Applies solid color fills to polygon features like boundaries or regions.

Configuration Options:

• fill-color: Interior color of the polygon
• fill-opacity: Transparency of the fill

Fill Extrusion Style

Creates 3D polygon visualizations with height-based extrusion.

Configuration Options:

• fill-extrusion-color: Color of the extruded polygon
• fill-extrusion-opacity: Transparency of the extrusion
• fill-extrusion-height: Height of the extrusion (can be data-driven)

Line Style

Renders linear features like roads, pipelines, or routes.

Configuration Options:

• line-color: Color of the line
• line-opacity: Transparency of the line
• line-width: Thickness of the line
• line-dasharray: Dash pattern for dotted/dashed lines (e.g., [2,2] for dashed)

Symbol Style

Uses icons or symbols to represent point features with extensive customization options.

Configuration Options:

• icon-image: Select icon from library or upload custom image
• icon-size: Scale of the symbol/icon
• text-field: Data field to display as text label
• text-size: Font size for text labels
• icon-opacity: Transparency of the icon
• icon-color: Tint color applied to the icon
• text-opacity: Transparency of the text
• text-color: Color of the text labels
• text-halo-color: Color of the text outline/halo
• text-halo-width: Width of the text outline

Shape Style

Renders custom user-drawn geometries with comprehensive styling controls.

Configuration Options:

• Shape Source: Field containing the shape data
• Predefined Shape Id: Reference to predefined shape definitions
• Override the shape style: Option to customize individual shape appearance

Shape Style Properties:

• Fill Color: Interior color of the shape
• Stroke Color: Border color of the shape
• Stroke Type: Border style (solid, dashed, etc.)
• Stroke Width: Thickness of the border
• Text Color: Color of any text within the shape
• Text Shadow: Shadow effect for text
• Font Size: Size of text within the shape

---