> For the complete documentation index, see [llms.txt](https://codifi-fdm.gitbook.io/codifi-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codifi-fdm.gitbook.io/codifi-docs/web-app/map-setup-and-offline-areas/map-overlays/styles/layers-and-properties.md).

# Layers & Properties

The **Layers tab** of the [Map Style Editor](/codifi-docs/web-app/map-setup-and-offline-areas/map-overlays/styles.md) is where you build a style by stacking individual visual **layers** on top of one another. Each layer renders one aspect of the overlay's geometry — a fill, an outline, a label, an icon — and you can have as many layers as you need, in any order.

***

## Layer Types by Geometry

The available layer types depend on the overlay's geometry. When you click **+ Add Layer**, the editor offers only the types that make sense:

| Geometry    | Layer Type       | What it renders                                                                                             |
| ----------- | ---------------- | ----------------------------------------------------------------------------------------------------------- |
| **Point**   | **Circle**       | Simple circular markers. The most common point representation.                                              |
| Point       | **Label**        | Text labels on each point — feature name, an attribute, etc.                                                |
| Point       | **Marker**       | Icon-based markers. Pick from the icon library or supply your own.                                          |
| Point       | **Heatmap**      | A density gradient showing where points cluster.                                                            |
| **Line**    | **Line**         | Styled line features with width, color, dash pattern, and stroke.                                           |
| Line        | **Label**        | Text labels along the line, or centered.                                                                    |
| **Polygon** | **Fill**         | Filled polygon interior with optional pattern or color.                                                     |
| Polygon     | **Outline**      | The polygon's border — drawn as a separate Line-type layer so it can have its own width, color, and stroke. |
| Polygon     | **Label**        | Text labels centered on each polygon.                                                                       |
| Polygon     | **3D Extrusion** | Vertical extrusion of the polygon — useful for buildings or volumes.                                        |

Most overlays use a small number of layers (a polygon overlay almost always uses Fill + Outline; adding a Label is common). Don't be afraid to add more — there's no performance cost worth worrying about for typical overlay sizes.

***

## Layer Order

Layers are drawn **bottom-to-top in the list** — the layer at the **top of the list** is drawn **last**, on top of everything below it. This matters most when layers might overlap or compete for visual attention.

Common ordering patterns:

* **Fill at the bottom, Outline above, Label on top** — the standard polygon stack. The outline reads cleanly over the fill, and the label reads cleanly over both.
* **Heatmap at the bottom, individual markers on top** — for point overlays where you want the density gradient to provide context but the individual Records to remain interactive.
* **Style-by-status above style-by-type** — if you have two paint layers, one coloring features by their workflow status and another by their archetype, the one you want to dominate visually goes on top.

To reorder, drag a layer in the list using its handle. The preview map updates as you drag.

***

## Property Groups

When you click a layer in the list, the **Properties shelf** below it organizes that layer's properties into groups. The exact groups depend on the layer type, but the most common are:

| Group      | What's in it                                                                                                                                                                           |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Paint**  | Visual properties that don't change the geometry: colors, opacity, stroke widths, fill patterns. The day-to-day styling controls.                                                      |
| **Layout** | Properties that affect how the layer is laid out: visibility, line cap/join shapes, text font and size, icon image.                                                                    |
| **Filter** | A condition expression that excludes features from this layer. See [Data-Driven Styling](/codifi-docs/web-app/map-setup-and-offline-areas/map-overlays/styles/data-driven-styling.md). |
| **Source** | Where the layer's data comes from. For overlays, this is set automatically.                                                                                                            |

Each property has a default editor (color picker, slider, dropdown) and a small **expression button** that switches the property to a [data-driven expression](/codifi-docs/web-app/map-setup-and-offline-areas/map-overlays/styles/data-driven-styling.md) if you need it to vary by attribute or zoom.

***

## Icons, Halos, and Pattern Fills

v3.3 expanded what you can draw with, and closed the gap between what the style editor previews and what the mobile app actually renders.

**A bigger icon set.** The shape library went from 21 icons to **34**. The additions fill in the obvious gaps: arrows in all four directions rather than only up and right, left and right triangles, an octagon, a ring, chevrons, and outline variants of the polygons and the star.

**Icons can carry halos.** Every shape icon now renders with a proper halo, so a symbol stays legible against busy satellite imagery or a dark hillshade. Set the halo color and width in the layer's Paint group like any other property.

**Pattern fills reach the field.** The pattern library went from 9 fills to **15**, and pattern fills now render on the mobile app. A hatched or stippled polygon styled here looks the same on an iPad in the field as it does in the editor.

{% hint style="info" %}
**Patterns are worth revisiting if you gave up on them before.** Because pattern color has to be baked into the image rather than tinted at draw time, patterns behaved differently across platforms in earlier versions. That is resolved, so hatching is now a reliable way to distinguish overlapping polygon layers without relying on fill opacity alone.
{% endhint %}

***

## Layer Filters Apply Everywhere

A filter expression written here now applies on the **main Project map**, not only in the style preview.

Previously a filter would behave correctly in the editor preview and then be discarded on the Project map, so every feature in the container rendered regardless of the condition. If you wrote filters before v3.3 and concluded they did not work, they will start taking effect now.

{% hint style="warning" %}
**Check your existing filtered layers after upgrading.** A filter that was silently ignored is now enforced. A layer that appeared to show everything may now correctly show only the subset you asked for, which is the intended behavior but may look like features have gone missing if you had forgotten the filter was there.
{% endhint %}

***

## Common Layer Recipes

#### A Polygon Overlay With Outline and Centroid Label

1. Add a **Fill** layer — set fill color and opacity (`30-50%` opacity is usually right for context layers so the basemap reads through).
2. Add an **Outline** layer (a Line-type layer auto-configured as the polygon's border) — set stroke color and width.
3. Add a **Label** layer — set the text source to the property you want to label (e.g. `name` or `parcel_id`), pick a font size that's readable at your typical working zoom.
4. Order: Fill → Outline → Label (bottom to top in the list).

#### A Point Overlay That Switches from Heatmap to Markers as You Zoom In

1. Add a **Heatmap** layer.
2. Add a **Circle** (or **Marker**) layer.
3. On the Heatmap layer, set its **opacity** to a zoom-based interpolate expression that fades it out above zoom 14.
4. On the Circle layer, set its **opacity** to the inverse — fading it in above zoom 14.

The result: a clean density view zoomed out, individual Records zoomed in, with a smooth transition between.

[**→ See zoom-based interpolate expressions**](/codifi-docs/web-app/map-setup-and-offline-areas/map-overlays/styles/data-driven-styling.md#zoom-and-interpolate-expressions)

#### A Line Overlay With Two Stacked Strokes (Casing)

A "casing" effect: a thick darker line behind a thinner brighter line. Common for highways or trail labels.

1. Add a **Line** layer — color dark, width 6.
2. Add another **Line** layer — color bright, width 3.
3. Order: dark line at the bottom of the stack, bright line at the top.

The thicker layer peeks out around the thinner one as a visual frame.

***

## Visibility, Duplicate, and Delete

Each layer in the list has three quick actions on its row:

* **Visibility toggle** — temporarily hide the layer without deleting it. Useful for comparing styles or stripping the map back to one layer for a screenshot.
* **Duplicate** — copies the layer with all its properties, ready to be tweaked. Perfect for creating two slightly different versions of the same layer (e.g. for a casing effect).
* **Delete** — removes the layer. Saved styles can have layers deleted; deleting the last layer leaves an unstyled overlay.

***

## See Also

* [Data-Driven Styling](/codifi-docs/web-app/map-setup-and-offline-areas/map-overlays/styles/data-driven-styling.md) — making properties react to attribute values, zoom level, or filters
* [JSON Styling & the Mapbox Spec](/codifi-docs/web-app/map-setup-and-offline-areas/map-overlays/styles/json-styling.md) — the JSON tab and links to every supported property