Vector layers

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.

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

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 drop-down in the General section of the style editor.

Simple

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

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.

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.

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.

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.

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 to learn more about H3 visualizations.

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 drop-down in the Point section of the style editor. Available for point layers.

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. To add icons, click the Upload icons button from the Custom tab of a point layer’s Icon picker.

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.

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.

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

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 drop-down

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.

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.

Setting Visibility

Adjust feature and label visibility by setting a visible zoom range for each using the Limit visibility option. This helps maintain visual hierarchy and readability, ensuring labels and features appear only at the zoom levels where they are most effective.

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.

Check out this video to learn more about interpolating style properties.

Customizing your legend

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

Resetting layer styles

If at any point you want to go back to the default style, all you have to do is click on the Actions > Reset style option in a layer’s overflow (three dots) menu

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.

Copy and paste a single layer

• Click on the three dot layer menu and choose the option to Copy (or use the keyboard shortcut Ctrl+C (Windows) or Cmd+C (Mac))

• 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))

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

Copy and paste multiple layers

Use List view to copy and paste multiple layers to another map at once.

• Use Shift+click to select the layers you want to copy and right-click to Copy (or use the keyboard shortcut Ctrl+C (Windows) or Cmd+C (Mac))

• 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))

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

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 three dot layer menu and choose the option to Duplicate (or use the keyboard shortcut Ctrl+D (Windows) or Cmd+D (Mac))

• To duplicate multiple layers go to List view and use Shift+click to select the layers you want, right-click and select the option to Duplicate

• 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 three dot (overflow) menu and select Actions > Edit style

• Once opened, you’ll see the advanced editor open on the right-hand side of the screen. This panel contains the Felt Style Language (FSL) for the selected layer.

The Felt Style Language (FSL) 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:

Learn more about FSL in our Developer docs.

MapLibre Style Overrides

Use paintPropertyOverrides in the Advanced Style Editor to access any of MapLibre’s 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

• 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

• 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.

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

• 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

"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
      ]
    }
  }