Conditional Style Rules
Apply different marker styles based on your data values.
What are style rules?
Style rules let you change marker appearance based on field values. For example, you can show different colors for different categories, or different icons for different statuses.
How they work
Each rule has conditions and a style configuration. When a feature matches the conditions, the rule's style is applied to that feature's marker and geometry.
Conditions
- Each condition checks a field value (e.g.,
statusequals "active"). - Conditions operator: set to
and(all conditions must match) oror(any condition can match). alwaysApply: if set totrue, the rule applies to all features regardless of conditions. Useful as a base style.
Style properties
Each rule can override the following properties:
Marker styles
- Marker type (default, icon, image, text)
- Marker source and URLs
- Marker size, anchor, and border color
- Render in pin toggle
Line and polygon styles
For non-point geometries (lines, polygons):
| Property | Description | Default |
|---|---|---|
strokeColor |
Line or border color | #32349b |
strokeWidth |
Line width in pixels | 1 |
strokeLineDash |
Line style: solid, dashed, or dotted | solid |
fillColor |
Polygon fill color (with alpha for transparency) | #32349b33 |
Template overrides
- Popup and card HTML/CSS (different templates per condition)
- Clustering settings
Rule weight
Rules have a weight property that controls evaluation order. Rules with a lower weight are applied first. Higher-weight rules override lower ones.
Stacking multiple rules
You can define multiple rules. They are evaluated in weight order, and later (higher-weight) rules override properties set by earlier ones. This lets you layer styles — for example, a base rule that sets a default icon, and specific rules that override the color for certain categories.
Example use cases
- Color-code markers by category — Restaurants in red, hotels in blue, parks in green.
- Different popup templates per type — Show a photo-focused popup for listings, a text-focused popup for events.
- Status-based icons — Active locations get a green icon, inactive ones get gray.
- Polygon styling by data value — Color regions based on population density or sales figures.