> For the complete documentation index, see [llms.txt](https://help.felt.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.felt.com/layers/styling/vector-layers.md).

# Vector layers

Style your points, lines and polygons by customizing style properties to create engaging Felt maps.

{% embed url="<https://www.youtube.com/watch?v=MnWHl-U47f8>" %}

The style editor provides different options for styling points, lines, and polygons, allowing you to control color, size, opacity, and many other visual properties. You can create simple maps or data-driven visualizations that vary based on attributes.

## The style editor

Once your data is uploaded to Felt you can style your layers with the style editor.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FGM09wqrw7Zk3mFo8lhvM%2Fimage%20(16).png?alt=media&amp;token=4352ae01-2339-47a3-b64e-c0140def3b83" alt="" width="375"><figcaption></figcaption></figure>

* To open the style editor, click on the layer you want to customize from the legend

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FwbhRtYzKim6FHAN4fPRg%2FScreen%20Recording%202025-03-02%20at%202.08.59%E2%80%AFPM.mp4?alt=media&token=9e705ad1-1a96-427a-93fa-0d4d92389859>" %}

## Choosing your map type

Depending on the geometry of your vector layer (point, line or polygon), you will have different visualization options. To select your visualization choose it from the Type dropdown in the General section of the style editor.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2Fgk31orSURvLRyLG0QcP2%2Fimage.png?alt=media&amp;token=5740a50b-424e-47be-888a-eefeae2cb571" alt="" width="296"><figcaption></figcaption></figure>

{% hint style="info" %}
If a polygon doesn't have a fill, popup interactions only work when clicking on the stroke (outline), not in the interior area. Make sure your polygon has a fill if you want clickable popups throughout.
{% endhint %}

### Simple

The default style when you upload a data layer — a single color for all features. Available for point, line and polygon layers.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FYR6bUmEYabmOfDkECYAt%2FScreenshot%202025-03-04%20at%209.41.18%E2%80%AFAM.png?alt=media&amp;token=d035efaf-0701-4a71-b866-74ab2620bac9" alt=""><figcaption></figcaption></figure>

### Categories

A categorical visualization maps a distinct color for every unique value of your chosen data attribute. A common type of categorical visualization are landuse maps where each landuse type is set to a distinct color. Available for point, line and polygon layers.

{% hint style="info" %}
Felt supports up to 256 unique categories in the legend.
{% endhint %}

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2Fx4E9OP1tyWEcQPa7npxV%2FScreenshot%202025-03-04%20at%209.40.24%E2%80%AFAM.png?alt=media&amp;token=9ece4832-7352-4e5e-a99c-107cd030c9f9" alt=""><figcaption></figcaption></figure>

### Color range

A color range visualization maps numeric data values to a gradient of colors, making patterns immediately visible. Traditionally used for choropleth maps with polygons, Felt extends this to points and lines as well. Colors can be applied continuously in direct proportion to values or grouped into distinct classes using various classification methods.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FiLy2L8Rb4ban4dTwTzpL%2FScreenshot%202025-03-04%20at%209.43.46%E2%80%AFAM.png?alt=media&amp;token=daa6922d-a430-42ce-9d48-8d021a85625a" alt=""><figcaption></figcaption></figure>

<details>

<summary>Learn more about classification methods for numeric data</summary>

There are many ways to style a data layer by a numeric field. For example, a **Continuous** style maps a color (or point size) for every unique value in your data, similarly to a categorical visualization. In this case, the color for each value is interpolated from the endpoint colors.

However, it’s more common to group values from numeric fields into *classes* (green from 0 to 5, yellow from 6 to 10, etc). Classes can be chosen manually or picked from one of Felt’s default classification methods:

* **Equal Intervals**: classes are split by an interval of constant value (0, 5, 10, 15…). Useful for evenly distributed data. Equal interval classifications are very sensible to outliers - very small or large values can lead to the majority of values to be grouped into just one or two classes. This classification method follows an *Arithmetic Series*, where the value of each breakpoint is equal to the previous value plus a constant value.
* **Quantiles**: contrary to equal intervals, the quantiles classification ensures that every class contains the same number of values. This can look nice from a visual standpoint, but often quantiles classifications can be misleading, since the size of each class may vary widely. They work well for evenly distributed datasets.
* **Standard Deviation**: the Standard Deviation method chooses classes based on the number of standard deviations from the mean. This classification method works very well for data that follows a bell curve (a Gaussian or “normal” distribution).

By default, the legend in a Standard Deviation classification does not show the breakpoint values, using instead the nº of standard deviations.

* **Geometric Intervals**: a classification method where the size of each class increases exponentially, very useful for right-skewed data. The term “Geometric” comes from the fact that the class breaks are chosen from a *geometric series* (where each value equals the previous value, multiplied by a constant coefficient).
* **Jenks Natural Breaks:** the Jenks optimization method can be used to find “natural” classes inside your data by minimizing the variation inside classes while maximizing the variation between classes. It works well for most kinds of distributions, which is why it’s the default method in Felt.

</details>

### Size range

A size range visualization scales points and lines based on numeric values, emphasizing differences in magnitude. Sizes can be applied continuously in direct proportion to values or grouped into distinct classes using various classification methods. Available for point and line layers.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2F3IfcxM2dhzejHC6bafgd%2FScreenshot%202025-03-04%20at%209.42.05%E2%80%AFAM.png?alt=media&amp;token=36d4a153-2ce7-4e9c-8ff1-5fb78f589408" alt=""><figcaption></figcaption></figure>

<details>

<summary>Learn more about classification methods for numeric data</summary>

There are many ways to style a data layer by a numeric field. For example, a **Continuous** style maps a color (or point size) for every unique value in your data, similarly to a categorical visualization. In this case, the color for each value is interpolated from the endpoint colors.

However, it’s more common to group values from numeric fields into *classes* (green from 0 to 5, yellow from 6 to 10, etc). Classes can be chosen manually or picked from one of Felt’s default classification methods:

* **Equal Intervals**: classes are split by an interval of constant value (0, 5, 10, 15…). Useful for evenly distributed data. Equal interval classifications are very sensible to outliers - very small or large values can lead to the majority of values to be grouped into just one or two classes. This classification method follows an *Arithmetic Series*, where the value of each breakpoint is equal to the previous value plus a constant value.
* **Quantiles**: contrary to equal intervals, the quantiles classification ensures that every class contains the same number of values. This can look nice from a visual standpoint, but often quantiles classifications can be misleading, since the size of each class may vary widely. They work well for evenly distributed datasets.
* **Standard Deviation**: the Standard Deviation method chooses classes based on the number of standard deviations from the mean. This classification method works very well for data that follows a bell curve (a Gaussian or “normal” distribution).

By default, the legend in a Standard Deviation classification does not show the breakpoint values, using instead the nº of standard deviations.

* **Geometric Intervals**: a classification method where the size of each class increases exponentially, very useful for right-skewed data. The term “Geometric” comes from the fact that the class breaks are chosen from a *geometric series* (where each value equals the previous value, multiplied by a constant coefficient).
* **Jenks Natural Breaks:** the Jenks optimization method can be used to find “natural” classes inside your data by minimizing the variation inside classes while maximizing the variation between classes. It works well for most kinds of distributions, which is why it’s the default method in Felt.

</details>

### Heatmap

A heatmap visualization uses color gradients to represent point density, highlighting areas of higher and lower concentration. Colors transition smoothly to reflect varying densities, with options to adjust intensity, radius, and color scheme. Available for point layers.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FOY0fpTNP5FQpbnqxGPz4%2FScreenshot%202025-03-04%20at%2010.02.32%E2%80%AFAM.png?alt=media&amp;token=3058f3a6-adc8-4f1a-9cc0-a583253271b7" alt=""><figcaption></figcaption></figure>

### H3

A H3 visualization groups points into hexagons, displaying point counts or aggregated numeric attributes (sum, average, max, or min). Choose a fixed H3 resolution for a consistent view across zoom levels or allow the resolution to adjust dynamically. Use popups to reveal additional aggregated values on hover or click. Available for point layers.

Check out [this video](https://www.youtube.com/watch?v=-9gIkHuJCMY) to learn more about H3 visualizations.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FG3pH9saLv26RnoLsoMe9%2FScreenshot%202025-03-04%20at%2010.03.50%E2%80%AFAM.png?alt=media&amp;token=fefb9675-706b-41eb-8241-3d24a731fa51" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Filtered H3 visualizations are estimates. For optimal accuracy, create a new layer from the filter and apply the H3 visualization to the new layer.
{% endhint %}

### Icons

Customize your point data with a variety of icons to make your map more intuitive and visually appealing. Select from Felt's built-in icon library, emojis or upload custom icons by clicking the **Icon** dropdown in the **Point** section of the style editor. Available for point layers.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2F38DN7bHHUMpyOYgm8ZAo%2FScreenshot%202025-03-04%20at%2010.05.40%E2%80%AFAM.png?alt=media&amp;token=c862abb5-f7c8-4cf5-b572-97a37d8b85df" alt=""><figcaption></figcaption></figure>

#### Custom icons

Upload your own icon sets to Felt to personalize your maps, highlight key features, or align them with your organization's branding. Icons are a powerful way to visually differentiate categories or other attributes within your point data, helping viewers quickly interpret the information. With Felt, you can organize your icons into Themes, making it easy to manage and apply them consistently across projects. Plus, shared access within your workspace ensures seamless collaboration and a unified look for your maps.

**Uploading custom icons**

Felt supports a wide variety of image formats, including .png, .jpg, .svg, and other [common image file types](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types). To add icons, click the Upload icons button from the Custom tab of a point layer’s Icon picker.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FqUqkyWYKCxUidZOdPHLW%2Fimage.png?alt=media&amp;token=8da82b32-8f0d-41c0-a8ef-47dae33fb7bf" alt="" width="375"><figcaption></figcaption></figure>

You can upload icons one at a time, or you can select many icons to upload at once by selecting them in the file picker.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FTygQg0rK14F3gViSEkwC%2FScreenshot_2025-01-14_at_2.53.34_PM.png?alt=media&amp;token=2596fd7b-f158-40d7-a8e7-e5a4d35dca8d" alt="" width="375"><figcaption></figcaption></figure>

Add icons to a single map, or make them available across all maps by adding them to your workspace. When you have many icons, you can assign icons themes to make browsing and searching more manageable.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2F22HScjBOhvhaqvAmj7xk%2FScreenshot_2025-01-14_at_2.58.18_PM.png?alt=media&amp;token=4477cc67-85a5-473d-a959-1b2f68ce9613" alt="" width="375"><figcaption></figcaption></figure>

Once icons have been uploaded, you can edit or delete them via the Edit icons button on the Custom tab of the Icon picker.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FDddJ9QQqvnxmFDZaNJgj%2FScreenshot_2025-01-14_at_3.02.31_PM.png?alt=media&amp;token=c22dc3c1-fde0-4ed1-84ba-2ba92d37120d" alt="" width="375"><figcaption></figcaption></figure>

### Fill patterns

Fill polygons with a repeating pattern instead of a solid color — hatching for disputed areas, dots for soil types, and other classic cartographic textures. Available for polygon layers using the Simple visualization type.

To apply a pattern:

* Click **Fill** in the **Polygon** section of the style editor
* In the **Fill style** section below the color picker, choose a style: **Solid**, **Hatch**, **Reverse hatch**, **Cross-hatch**, **Horizontal lines**, **Vertical lines**, or **Dots**
* Adjust **Spacing** to control the gap between lines or dots, and **Thickness** to control their weight

Felt draws the pattern in the layer's fill color, and the basemap shows through between the strokes. The legend and the Fill chip both update to match the pattern on the map. Patterns also follow [zoom-based fill colors](#interpolating-style-properties), so a pattern can change color as viewers zoom in or out.

{% hint style="info" %}
Fill patterns are currently only available with the Simple visualization type. Switching a patterned layer to Categories or Color range clears the pattern.
{% endhint %}

## Labelling

Good labeling give maps meaning by improving clarity, directing attention, and maintaining visual balance. A well-labeled map helps users quickly find what they need without feeling cluttered or overwhelming.

To turn labels on for a layer, choose the attribute from the **Label by** dropdown

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2F3OhDXKL4phGvICzQ2AKO%2FScreenshot%202025-03-03%20at%208.01.31%E2%80%AFPM.png?alt=media&amp;token=41c5fa6d-69c0-4d1a-be6e-3ae02de38be0" alt="" width="298"><figcaption></figcaption></figure>

You can then fine-tune them in the following ways:

* **Size**: choose between small, medium and large sizes.
* **Color**: choose a color from the color picker or directly input an RGB, hex or HSL value.
* **Halo**: choose a color and width for the halo surrounding the label text.
* **Style**: many more options to customize your labels, including:
  * **Weight**: regular, medium, bold and italic weights, or a combination of these.
  * **Case:** convert labels to lower or uppercase.
  * **Letter spacing:** spacing between letters, in pixels.
  * **Line spacing:** spacing between lines, in pixels.
  * **Max length:** max character length for labels.
  * **Placement:** choose between automatic placement or prefer a certain direction (top, right, etc).
  * **Offset:** the offset between the feature and label, in pixels.
  * **Padding:** label padding is the amount of transparent pixels to add around your label items. Increasing this amount will result in fewer labels in the map.

### Formatting labels

Labels use the column's [formatting](/layers/formatting.md) automatically. When a column is set to display as currency, a percentage, or a fixed number of decimals, its labels update to match, with no style override needed. A `revenue` column formatted as currency labels each feature `$1,234,567` instead of `1234567`.

To change how a label's values are formatted:

* Open the [table view](/layers/table-view.md) and click the column name, then choose **Format**
* Pick a **Number**, **Percent**, **Distance**, **Area**, or **Custom** format and adjust the decimals, units, or thousands separators
* The label on the map updates to match, along with the same column in the table, popups, and components

To combine several attributes into one label, add literal text, or split a label across lines, use a `text-field` [MapLibre style override](#customizing-labels).

## Zoom-based styling

One of the more challenging aspects of digital cartography is ensuring your maps look good at all zoom levels. Felt gives you control over what your visualizations look like at each zoom by letting you not only control visibility of features and labels but also interpolate styling properties between zoom levels.

The legend will always sync to the style that matches the current zoom level of the map. This ensures a viewer always sees accurate symbology between the legend and map.

### Setting Visibility

Adjust feature and label visibility by setting a visible zoom range for each using the **Limit visibility** ![](https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FPLl4lvx7PJrxJB1kBedo%2Flimit_visibility.svg?alt=media\&token=537115fa-fd60-48de-a60c-eb07bb14bace)option. This helps maintain visual hierarchy and readability, ensuring labels and features appear only at the zoom levels where they are most effective.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2F0P4NKeSKuAB7hh0V1qUV%2FScreenshot%202025-03-19%20at%203.59.41%E2%80%AFPM.png?alt=media&amp;token=ac86a6a1-f19d-4f34-bbc0-db0edb0153e6" alt="" width="563"><figcaption></figcaption></figure>

### Interpolating style properties

Zoom-based styling in Felt allows you to adjust visual elements like line thickness, opacity, and color at different zoom levels, creating maps that reveal appropriate details as users zoom in or out. This technique enables features like roads to appear thinner at zoomed-out views and thicker when zoomed in, or polygons to gradually fade in as the user zooms closer to a specific area.

{% columns %}
{% column %}

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FqVLJfWEvXNtBNNzbKgfx%2Fcolor.png?alt=media&amp;token=b262a35e-2332-4eff-a970-9d4062de259c" alt="" width="238"><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2Fy4ukO27ZNxi7GOVg5pBU%2Fpoint%20size.png?alt=media&amp;token=33d5599e-b3f9-4bce-b965-9e58c90d7680" alt="" width="238"><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

Check out [this video](https://www.youtube.com/watch?v=cHo2cyK7Frc) to learn more about interpolating style properties.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FhLYjT8XXTBZTXYt5Zlv5%2Fzoom_interpolation_line_width.mp4?alt=media&token=c1816fb3-0394-424c-9f1e-1153fba694bf>" %}

## Customizing your legend

Add a caption, retouch colors and display names in the **Legend** tab.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FNWpHI8A8beG3jB5o5yfb%2FScreen%20Recording%202025-03-03%20at%208.10.28%E2%80%AFPM.mp4?alt=media&token=8088deea-f1c8-4869-8b8b-653157053703>" %}

## Style multiple layers at once

Select two or more layers to style them all at once from the Legend or [List](/layers/list.md) view. Use **Shift+click** to select a range or **Cmd+click** (Mac) / **Ctrl+click** (Windows) to add layers individually.

With multiple layers selected, the style panel opens with the same controls as the single-layer Style tab, and every edit you make applies to the whole selection. This is the fastest way to turn off popups or legends for a batch of layers, or to give them all the same color or label style.

Controls are grouped by geometry type, so a mixed selection of points, lines, and polygons shows a section for each (heatmaps get their own section too). The following apply across the whole selection:

* Geometry styling — fill (including patterns), stroke, casing, size, opacity, icons, and position
* Labels — all label controls
* Legend visibility (show/hide)
* Popup interaction
* Visibility range

### Mixed values

When the selected layers don't already share the same value for a control, that control reads **Mixed** instead of showing a value. Setting a new value from **Mixed** applies it to every layer in the selection. Each change you make — including one made from **Mixed** — is a single undo step across the whole selection.

### Label by

The **Label by** dropdown lists only the columns every selected layer has, so any column you choose can be applied to all of them. If the layers currently label by different columns, it reads **Mixed**. If the layers share no columns at all, the dropdown has nothing to offer, but the label section stays open and the rest of the label styling remains editable across the selection.

### What stays per layer

A few settings are still edited one layer at a time, even within a multi-layer selection: classification and categories, color-by, legend contents, per-band raster settings, and popup contents. These follow one representative layer from your selection.

## Resetting layer styles

If at any point you want to go back to a layer's original style, click **Actions > Reset styles** from a layer’s overflow (**···**) menu.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FVk2x9p5rIIbeeI96W5eA%2FScreen%20Recording%202025-03-03%20at%208.15.25%E2%80%AFPM.mp4?alt=media&token=8a5b81fc-17e6-4eee-bcf3-c9b8cb7ead87>" %}

## Copy and paste layers

Copying and pasting layers between maps streamlines your workflow when working with multiple maps and ensures consistent visualization across your projects. This is particularly useful when you want to bring an already styled layer, multiple layers or a layer group onto another map or quickly use template layers across multiple maps. All styling, layer filters, components, popup and legend configurations are copied over.

{% hint style="info" %}
This same functionality is available for [raster layers](/layers/styling/raster-layers.md).
{% endhint %}

### Copy and paste a single layer

* Click on the layer's **···** menu and choose the option to **Copy** (or use the [keyboard shortcut](/getting-started/keyboard-shortcuts.md) **Ctrl+C** (Windows) or **Cmd+C** (Mac))

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FKE7BKRlG6kWLnXbTvPe1%2FScreenshot%202025-05-01%20at%2011.58.38%E2%80%AFAM.png?alt=media&amp;token=41705448-98a8-4b73-9367-c9610166cc37" alt="" width="563"><figcaption></figcaption></figure>

* Navigate to the destination map and right-click anywhere on the map canvas and choose the option **Paste here** (or use the keyboard shortcut **Ctrl+V** (Windows) or `Cmd+V` (Mac))

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FKG6cRH71IWjVDPnEc5eW%2FScreenshot%202025-05-01%20at%2012.00.23%E2%80%AFPM.png?alt=media&amp;token=12db09c8-fde7-4b5a-bb53-b10e0ad46a43" alt="" width="563"><figcaption></figcaption></figure>

* The copied layer will appear with all its original styling and configurations intact

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FIwfl38JhijzFh5f3oXeD%2FScreenshot%202025-05-01%20at%2012.02.48%E2%80%AFPM.png?alt=media&amp;token=8682116b-92f4-4172-8acf-d873663e9d13" alt="" width="563"><figcaption></figcaption></figure>

### Copy and paste multiple layers

Select multiple layers to copy and paste them to another map at once from the Legend or [List](/layers/list.md) view.

* Use **Shift+click** to select a range of layers or **Cmd+click** (Mac) / **Ctrl+click** (Windows) to add layers individually, then right-click and choose **Copy** (or use the [keyboard shortcut](/getting-started/keyboard-shortcuts.md) **Ctrl+C** (Windows) or **Cmd+C** (Mac))

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FGQSZ7FbOr3btTru1fs94%2FScreenshot%202025-05-01%20at%2012.09.58%E2%80%AFPM.png?alt=media&amp;token=cf0b5ebc-3351-4d72-be7d-f22253dae84c" alt="" width="563"><figcaption></figcaption></figure>

* Navigate to the destination map and right-click anywhere on the map canvas and choose the option to **Paste here** (or use the keyboard shortcut **Ctrl+V** (Windows) or `Cmd+V` (Mac))

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FoLPTEazie2ljjynPrf5q%2FScreenshot%202025-05-01%20at%2012.13.24%E2%80%AFPM.png?alt=media&amp;token=cd4b79dd-8bd6-4795-834d-bfb641d32ea4" alt="" width="563"><figcaption></figcaption></figure>

* The copied layers will appear with their original styling and configurations intact

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2F6h6DTNSXdUfmHcMPXOGx%2FScreenshot%202025-05-01%20at%2012.14.15%E2%80%AFPM.png?alt=media&amp;token=01b204a0-2982-4183-ab0e-e972d32ee78e" alt="" width="563"><figcaption></figcaption></figure>

### Duplicate layers

When working within the same map, you can use the Duplicate option to duplicate a single layer or multiple layers with all styling and configurations preserved.

* Click on the layer's **···** menu and choose the option to **Duplicate** (or use the [keyboard shortcut](/getting-started/keyboard-shortcuts.md) **Ctrl+D** (Windows) or `Cmd+D` (Mac))

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FKcfG9j6dT5q2G6N0y2vO%2FScreenshot%202025-05-01%20at%2012.21.26%E2%80%AFPM.png?alt=media&amp;token=0bc13da3-dd81-4990-ad88-22cd8a087d48" alt="" width="563"><figcaption></figcaption></figure>

* To duplicate multiple layers, select them in the [List](/layers/list.md) view or the Legend view using **Shift+click** or **Cmd+click** (Mac) / **Ctrl+click** (Windows), then right-click and select the option to **Duplicate**

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2F6iohxtxH5JhPm1PKGHCE%2FScreenshot%202025-05-01%20at%2012.30.32%E2%80%AFPM.png?alt=media&amp;token=ec9511d9-845a-48db-a201-e6ec358d305c" alt="" width="563"><figcaption></figcaption></figure>

* The duplicated layers will appear with their original styling and configurations intact

## Advanced styling

For more control fine-tuning your visualization or if you prefer writing style through code you can use the advanced style editor.

To open the advanced editor for any layer

* Click on the layer's **···** menu and select **Actions > Edit style language**
* Once opened, you’ll see the advanced editor open on the right-hand side of the screen. This panel contains the [Felt Style Language](https://developers.felt.com/felt-style-language/getting-started) (FSL) for the selected layer.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2Fk8a3H3wNJKIckRTLcvxq%2FScreen%20Recording%202025-03-04%20at%208.34.09%E2%80%AFAM.mp4?alt=media&token=e73202c5-1d30-4e07-b46e-e9e798510099>" %}

The [Felt Style Language (FSL)](https://developers.felt.com/felt-style-language/getting-started) is a JSON-based specification of Felt styles, and is the single source of truth for a layer’s style. You can check this yourself by making changes in the style editor while having the advanced style editor open:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FUAXX30I1CgN8S4P2qJUR%2FScreen%20Recording%202025-03-04%20at%208.46.49%E2%80%AFAM.mp4?alt=media&token=24bd9b6b-10e6-4688-93ce-48b231589e2f>" %}

Learn more about FSL in our [Developer docs](https://developers.felt.com/felt-style-language/getting-started).

### MapLibre style overrides

Use `paintPropertyOverrides` in the advanced style editor to access any of [MapLibre’s](https://maplibre.org/maplibre-style-spec/layers/) `paint` or `layout` styling capabilities. This lets you apply advanced effects like icon rotation, drop shadows, and offset geometry, or build custom, data-driven visualizations such as bivariate maps and attribute-based styles. It’s especially useful when you need more control than Felt’s built-in style options.

#### To apply a MapLibre override

* Open the advanced style editor
* Inside the `paint` block, add a `paintPropertyOverrides` object
* Insert any supported MapLibre property

#### Tips & Best Practices

* Property names must match [MapLibre's documentation](https://maplibre.org/maplibre-style-spec/layers/)
* Overrides take precedence over FSL’s auto-generated properties (for example, if you set the MapLibre `fill-color` property it will override the FSL `color` property)
* The legend will not reflect the MapLibre style overrides
* Invalid or mismatched properties are silently ignored

#### Examples

**Color based on a column/attribute**

* If your data includes a field with color values (like `#FF5733`), you can use style overrides to color each feature based on its assigned color in the data. In the example below, you can see that `fill-color` overrides the FSL `color` property.

```json
"paint": {
    "color": "rgb(235, 147, 96)",
    "isClickable": false,
    "isHoverable": false,
    "isSandwiched": false,
    "opacity": 0.8,
    "strokeWidth": 0,
    "paintPropertyOverrides": {
        "fill-color": ["get", "color"]
    }
  }
```

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2F66qpVitdfdTOTsRncRkX%2Fbathymetry.mp4?alt=media&token=98185b66-5aa0-4044-ba7f-2c5956ba73ad>" %}

**Bivariate styling**

* A bivariate map visualizes two variables at once - often by combining color (for a categorical attribute) and size (for a numeric attribute). In the example below, each country point is colored by its continent using a categorical style set in the style editor and then sized by its population by adding the MapLibre `circle-radius` property in the advanced style editor

```json
"paint": {
    "color": "@catPalette4",
    "isClickable": true,
    "isHoverable": false,
    "opacity": 0.9,
    "size": 3,
    "strokeColor": "auto",
    "strokeWidth": 1,
    "paintPropertyOverrides": {
      "circle-radius": [
        "interpolate",
        ["linear"],
        ["get", "population"],
        71801000, //min population value
        8, //min symbol size
        1463870000, //max population value
        40 //max symbol size
      ]
    }
  }
```

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FL7AkWXWccnmW1WtYdnRt%2Fbivariate.mp4?alt=media&token=6cf4e4ac-50c6-4143-9c57-c642d629002c>" %}

#### Concatenating labels

Style overrides work on labels too. In the `label` block's `paintPropertyOverrides` you can set any of MapLibre's text and symbol properties, for finer control than the built-in label options give you. The example below combines several attributes into one label, but the same approach applies to anything MapLibre exposes for label rendering.

A label set through the **Label by** dropdown already respects the column's [formatting](/layers/formatting.md): set a column to currency, percent, or a fixed number of decimals and its labels match, with no override needed. To build a label from more than one attribute, override the `text-field` property.

Two expressions do most of the work here:

* `concat` joins pieces together: attributes, literal text like `"$"` or `" feet"`, and line breaks. Use `\n` to start a new line.
* `number-format` formats a number. A `text-field` override builds the label from scratch, so a raw value like `1234567` comes through unformatted. Wrap it in `number-format` to get `1,234,567`.

**String + numeric label with formatting**

This example puts a product category on the first line and a formatted revenue value below it.

```json
"label": {
    "color": "auto",
    "fontSize": 13,
    "fontWeight": 500,
    "haloColor": "auto",
    "haloWidth": 1,
    "placement": "auto",
    "paintPropertyOverrides": {
      "text-field": [
        "concat",
        ["get", "product_category"],
        "\n",
        "$",
        ["number-format", ["get", "total_revenue"], { "max-fraction-digits": 0 }]
      ]
    }
  }
```

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FI3DOQ2OwgGzplY4qWiel%2FScreenshot%202026-07-14%20at%201.47.14%E2%80%AFPM.png?alt=media&amp;token=672559cd-fcfc-4ae2-ae7b-747efe2c8523" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Tip: Add `{ "max-fraction-digits": 0 }` to drop decimals, or `{ "min-fraction-digits": 2, "max-fraction-digits": 2 }` to add.
{% endhint %}

**Concatenate multiple attributes**

When you are only joining text, no number formatting is needed. `concat` alone builds a clean multi-line label. The example below concatenates address, city and state attributes.

```json
"label": {
    "color": "auto",
    "fontSize": 13,
    "fontWeight": 500,
    "haloColor": "auto",
    "haloWidth": 1,
    "placement": "auto",
    "paintPropertyOverrides": {
      "text-field": [
          "concat",
          ["get", "Address"],
          "\n",
          ["get", "City"],
          ", ",
          ["get", "State"]
        ]
    }
  }
```

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2Fij45GSzIisNWGk3nr4Rr%2FScreenshot%202026-07-14%20at%201.57.26%E2%80%AFPM.png?alt=media&amp;token=1d7e3555-e4b4-4783-abd3-2afb1d9b6609" alt=""><figcaption></figcaption></figure>

**Percentage**

`number-format` has no percent mode, so multiply the value by 100 yourself and append `"%"`. A rate of `0.873` becomes `87.3%`. For a single-attribute label, the column's Percent format does this for you.

```json
"text-field": [
  "concat",
  ["number-format", ["*", ["get", "rate"], 100], { "max-fraction-digits": 1 }],
  "%"
]
```

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FFRAQw3Wc5FBYkjc7N6Lw%2FScreenshot%202026-07-14%20at%202.00.45%E2%80%AFPM.png?alt=media&amp;token=ca70dc28-256e-4a25-90cc-8ecd21ae4278" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
A few things to keep in mind:

* A single-attribute label already uses the column's formatting, so you only need a `text-field` override to combine attributes, add literal text, or split a label across lines.
* Use `number-format`, not `to-string`, when you want thousands separators. `to-string` returns the raw digits with no grouping.
* Don't wrap identifiers like ZIP codes or years in `number-format`, or they'll pick up separators (`33,511`, `2,024`). Reference those fields directly.
* The full list of `number-format` options (`currency`, `locale`, `min-fraction-digits`, `max-fraction-digits`) is in [MapLibre's number-format reference](https://maplibre.org/maplibre-style-spec/expressions/#number-format). If `currency` doesn't render in your map, prepend a literal `"$"` instead.
  {% endhint %}

### **Styling vector tiles**

Because the data are streaming into Felt from a remote server, you first need to read in attribute values before you can [style layers](/layers/styling/vector-layers.md).

* Click the layer in the legend to open the [style editor](#the-style-editor)
* In the detail panel, choose a [visualization type](#choosing-your-map-type)
* If it is a categorical visualization

  * Use the **Color by** dropdown and choose the attribute you want to style by
  * For the **Showing** dropdown click **Add categories**
  * In the **Set Categories** panel, click **Add all** to pull in the attribute values in your current view

  <figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FXznss3pLv8aEAbaWDVWC%2FScreenshot%202025-04-10%20at%205.07.11%E2%80%AFPM.png?alt=media&amp;token=27803c8c-f481-4213-82f5-8718a6f30ce9" alt="" width="563"><figcaption></figcaption></figure>
* If it is a numeric visualization
  * Use the **Color by** or **Size by** dropdown to choose the attribute you want to style by
  * Click **Set steps** next to the Steps dropdown
  * Click **Set as range** to use values from the current view or manually enter a custom min and max **Range**

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FqyPm9YFhJR6a0iEJjMUO%2FScreenshot%202025-04-10%20at%205.25.25%E2%80%AFPM.png?alt=media&amp;token=9923d348-0cc3-4208-aad0-97c46ab39ae0" alt="" width="563"><figcaption></figcaption></figure>

#### Tips

* Attribute values are loaded from the data currently visible in your map view. Zoom or pan to see more, then click **Add all** again to expand the category list or **Set as range** to update the min/max.
* Because the data are streaming directly from a remote server, some classification methods, the data table, Components and Filters are unavailable.

## Frequently asked questions

<details>

<summary>How do I open the style editor?</summary>

Open a map in Edit mode and then click on any layer in your map legend to open the style editor. It will appear on the right-side.

</details>

<details>

<summary>Can I reset a layer to its original style?</summary>

Yes! Click on the layer's **···** menu and select Actions > Reset styles to revert to the default styling.

</details>

<details>

<summary>What visualization types are available in Felt?</summary>

Felt offers several visualization types depending on your layer geometry:

* **Simple**: One color for all features (points, lines, polygons)
* **Categories**: Distinct colors for unique attribute values (points, lines, polygons)
* **Color range**: Gradient colors based on numeric values (points, lines, polygons)
* **Size range**: Scaled sizing based on numeric values (points, lines)
* **Heatmap**: Density visualization using color gradients (points only)
* **H3**: Hexagonal aggregation of point data (points only)

</details>

<details>

<summary>How many categories can I display in a categorical map?</summary>

Felt supports up to 256 unique categories in the legend.

</details>

<details>

<summary>What's the difference between Color range and Size range?</summary>

Color range applies color gradients based on numeric values, while Size range changes the physical size of points or line thickness based on numeric values. Both can help emphasize patterns in your data.

</details>

<details>

<summary>Can I do per-category styling in Felt?</summary>

Yes! Per-category styling is available for Categorical, non-continuous Color range, and non-continuous Size range visualization types. One example of this is setting different icons for various POI categories on a map.

To access specific styling for each class or category, click on the **All Points**, **All Lines**, or **All Polygons** menu when styling the appearance and drill down into the specific settings for that group of features.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FhVBwPRMqpYR99u9ek2eI%2Fimage.png?alt=media&amp;token=cbe81e70-dbcc-4009-a53a-c87344940c74" alt="" width="375"><figcaption></figcaption></figure>

</details>

<details>

<summary>What is an H3 visualization? Does Felt support H3?</summary>

H3 visualizations group points into hexagons and can display point counts or aggregate numeric attributes (sum, average, max, or min). You can use fixed or dynamic resolution levels. Felt supports visualizing points as H3 hexagons as well as H3 geomatching (see [Spreadsheets](/upload-anything/spreadsheets.md#h3-geomatching)).

</details>

<details>

<summary>Can I fill polygons with a pattern like hatching or dots?</summary>

Yes! For polygon layers using the Simple visualization type, click **Fill** in the style editor and choose a pattern in the **Fill style** section: Hatch, Reverse hatch, Cross-hatch, Horizontal lines, Vertical lines, or Dots. The **Spacing** and **Thickness** sliders control the density and weight of the pattern, and it is drawn in the layer's fill color.

</details>

<details>

<summary>Can I use custom icons for my point data?</summary>

Yes! You can upload custom icons in formats like .png, .jpg, and .svg. Icons can be uploaded individually or in bulk, organized into themes, and shared across your workspace.

</details>

<details>

<summary>Where can I find icons to use?</summary>

You can choose from Felt's built-in icon library, use emojis, or upload your own custom icons.

</details>

<details>

<summary>How do I add labels to my map?</summary>

Select an attribute from the **Label by** dropdown in the style editor to turn labels on for a layer.

</details>

<details>

<summary>What label properties can I customize?</summary>

You can adjust:

* Size (small, medium, large)
* Color (RGB, hex, or HSL values)
* Halo color and width
* Weight (regular, medium, bold, italic)
* Case (uppercase/lowercase)
* Letter spacing and line spacing
* Max character length
* Placement and offset
* Padding

</details>

<details>

<summary>Why are some features labeled and others not?</summary>

Felt skips labels rather than crowd the map: where one would overlap another, where a line is too short on screen to fit the text, or where it bends too sharply for text to follow. Lower **Padding** or **Size** to fit more. For lines, the [advanced style editor](#advanced-styling) adds `maxAngle`, which sets how far text may turn between characters, and `repeatDistance`, the spacing between repeats of a label.

</details>

<details>

<summary>Can I format the numbers in my labels?</summary>

Yes. Labels use your column's [formatting](/layers/formatting.md) automatically, so setting a column to currency, percent, or a fixed number of decimals updates its labels to match. To combine several attributes into one label or split a label across lines, use a `text-field` [MapLibre style override](#customizing-labels).

</details>

<details>

<summary>How can I control visibility at different zoom levels?</summary>

Use the **Limit visibility** option ![](https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FeBYvIEgVQnaoZksci9Ji%2FUIIconButton.png?alt=media\&token=32b4f6dc-052d-47b9-8506-1786a9a39557) to set a visible zoom range for features and labels.

</details>

<details>

<summary>Can I change styling properties at different zoom levels?</summary>

Yes! You can interpolate style properties like line thickness, opacity, and color between zoom levels, so features automatically adjust as users zoom in or out.

</details>

<details>

<summary>I just styled a layer, how can I get copy layer onto another map? How do I copy multiple layers at once?</summary>

You can copy layers between different maps with copy & paste. Copy a layer (Ctrl+C or Cmd+C), navigate to your new map, and paste it (Ctrl+V or Cmd+V). All styling, filters, popups, and legend configurations will be preserved.

To copy multiple layers at once: use the List view in Edit mode, hold Shift and click to select multiple layers, then right-click and choose Copy. Then paste them on your new map.

</details>

<details>

<summary>Are there advanced style controls I can access? Can I style a layer programmatically with Felt's REST API?</summary>

Yes, Felt's style editor is powered by Felt Style Language (FSL), which is a JSON-based specification that provides more control over styling through code. The advanced style editor in Felt's UI gives you access to Felt Style Language (FSL). To access the advanced style editor, click on a layer's **···** menu and select **Actions > Edit style language**.

See [Felt's developer docs](https://developers.felt.com/felt-style-language/getting-started) to learn more about Felt Style Language.

</details>

<details>

<summary>What are MapLibre style overrides? What can I do with MapLibre style overrides?</summary>

MapLibre overrides let you access advanced styling capabilities like icon rotation, drop shadows, offset geometry, and bivariate visualizations by adding `paintPropertyOverrides` to the FSL using the advanced style editor in Felt. These settings do not appear or reflect in the legend but are applied directly to the layer rendering.

</details>

<details>

<summary>How do I style vector tile layers?</summary>

Vector tiles stream data from remote servers, so you need to:

1. Open the style editor and choose a visualization type
2. For categorical styles: Select your attribute and click **Add all** to load values from your current view
3. For numeric styles: Choose your attribute and click **Set as range** to use values from your current view

</details>

<details>

<summary>What styling features are unavailable for vector tiles?</summary>

Because vector tile data streams from remote servers, some classification methods, the data table, Components, and Filters are not available.

</details>

<details>

<summary>How can I customize my legend?</summary>

In the Legend section of the style editor, you can add captions, adjust colors, and edit display names to make your legend more informative and visually cohesive.

</details>

<details>

<summary>Why aren't my popups working on polygons?</summary>

If a polygon doesn't have a fill, popup interactions only work when clicking on the stroke (outline), not in the interior area. Make sure your polygon has a fill if you want clickable popups throughout.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.felt.com/layers/styling/vector-layers.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
