> 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.md).

# Map Styles

Codifi's **Map Style Editor** is the visual editor for how every overlay and archetype renders on the map. It opens in a modal with a live preview on one side and a layer-and-properties shelf on the other. Whether you want to flip a polygon's fill color or build a data-driven style that paints sites by type and only shows artifact markers above zoom 16, the same editor does both.

> **Screenshot placeholder:** *The Map Style Editor modal — preview map on the left, Layers / JSON tabs and properties shelf on the right.*

***

## What's in This Section

| Page                                                                                                                   | What it covers                                                                                                                                                                                                                                                                 |
| ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [Layers & Properties](/codifi-docs/web-app/map-setup-and-offline-areas/map-overlays/styles/layers-and-properties.md)   | The Layers tab — what layer types each geometry supports (Point: Circle / Label / Marker / Heatmap; Line: Line / Label; Polygon: Fill / Outline / Label / 3D Extrusion), how to add and reorder layers, and the property groups (Paint / Layout / etc.) you'll edit per layer. |
| [Data-Driven Styling](/codifi-docs/web-app/map-setup-and-offline-areas/map-overlays/styles/data-driven-styling.md)     | The visual builders for **Match**, **Case**, **Interpolate**, and **Filter** expressions — how to color a polygon by attribute, scale a circle by a numeric value, show or hide features by zoom, and combine multiple conditions.                                             |
| [JSON Styling & the Mapbox Spec](/codifi-docs/web-app/map-setup-and-offline-areas/map-overlays/styles/json-styling.md) | The JSON tab — when to drop into raw style JSON, links to the Mapbox style specification for every supported layer type, and a prompt template for using AI to draft styles.                                                                                                   |

***

## How the Editor Is Structured

The Map Style Editor has three regions:

| Region                                | What it does                                                                                                                                                                                                            |
| ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Preview map**                       | Renders your overlay (or archetype's geometry) with the current style applied, updating live as you edit. Pan and zoom to test how the style holds up at different scales.                                              |
| **Layers / JSON tabs** (top of shelf) | Toggle between the visual layer editor and the raw style JSON. The two stay in sync — edit in either and the other reflects the change when you switch back.                                                            |
| **Properties shelf** (selected layer) | When a layer is selected on the Layers tab, its properties appear here grouped by purpose (Paint, Layout, Filter, etc.). Each property has an inline visual editor and an option to switch to a data-driven expression. |

Every change you make in the editor is provisional until you save — close without saving and nothing changes.

***

## Layers vs Overlays

Two related concepts that are easy to confuse:

* An **Overlay** is a GeoJSON layer you uploaded to a Project (a property boundary, a planned transect, a hazard zone). The Map Style Editor controls **how the overlay renders**.
* A **Layer** inside the Style Editor is a Mapbox-spec drawing layer — *one* visual representation of the overlay's geometry. A polygon overlay typically has at least two layers (Fill + Outline). You can have multiple layers per overlay (Fill + Outline + Label, all stacked).

[**→ Read more about layer types**](/codifi-docs/web-app/map-setup-and-offline-areas/map-overlays/styles/layers-and-properties.md)

***

## Where to Open the Editor

The Map Style Editor is available in three places:

* **Per overlay** — open Project Settings → Map Data Overlays → click an overlay → **Edit Style**. Customizes how that one overlay renders for this specific Project.
* **Per archetype (in the Library)** — open Library → Compositions → an archetype → Map Style. Customizes how every Record of that archetype renders, across every Project using the Composition.
* **For Project Details** — Project Details has its own geometry (the Project area polygon) and its own style.

When the same editor is used for archetypes, it has automatic access to **the archetype's fields** for data-driven styling — color a Site by `Site Type`, size a Feature by `Artifact Count`. See [Data-Driven Styling](/codifi-docs/web-app/map-setup-and-offline-areas/map-overlays/styles/data-driven-styling.md) for how that works.

***

## See Also

* [Map Overlays](/codifi-docs/web-app/map-setup-and-offline-areas/map-overlays.md) — uploading and managing overlays before you style them
* [Project Map Extent](/codifi-docs/web-app/map-setup-and-offline-areas/project-map-extent.md) — the Project boundary that frames everything