Formatting

Format attribute values for improved map readability.

Whether you format a numeric field from the table view, with interactions, or with a component, your formatting choices are automatically synchronized across all three locations ensuring consistent data presentation throughout your map. This unified formatting approach not only makes it easier to view and understand your data, but also gives your final map with components or interactions a polished, professional appearance.

Format options

Number, percent, and custom formats provide different ways to display your numeric data

• Number: Displays values as standard numbers (e.g., 1234.56)

• Percent: Converts values to percentages and adds the % symbol (e.g., 12.3%)

• Custom: Allows for specialized formatting using numbro.js

Further customize with

• Decimal places: Controls how many digits appear after the decimal point

• Units: Add prefix or suffix text to your numbers (e.g., $100 or 50 km)

• Thousand separators: Inserts commas between thousands for improved readability (e.g., 34,500)

• Round Large Values: Simplifies large numbers into abbreviated forms (e.g., 1.2M)

The Preview section of the modal updates to show how the formatted numbers will look as you make your selections.

Format from table view

• Click on a column name and choose the option to Format...

Format from popup

• Click 123 when hovering over a numeric attribute in the Popup content panel

Format from component

• Select an option from Format in the component configuration panel

Custom formatting

Felt uses numbro.js to enable custom formatting of numeric attributes.

• From the Format drop-down choose Custom

• Enter your custom numbro.js formatting

Refer to the examples below to get started with custom formatting. For a more detailed overview of options, visit their documentation and code examples.

Numbers

Input Value	Format	Output Display
10000	{ "thousandSeparated": true, "mantissa": 4 }	10,000.0000
10000.23	{ "thousandSeparated": true }	10,000.23
10000.23	{ "thousandSeparated": true, "forceSign": true }	+10,000.23
-10000	{ "thousandSeparated": true, "mantissa": 1 }	-10,000.0
10000.1234	{ "mantissa": 3 }	10000.123
10000.1234	{ "optionalMantissa": true, "mantissa": 5 }	10000.12340
1.23	{ "trimMantissa": true, "mantissa": 4 }	1.23
1.234	{ "trimMantissa": true, "mantissa": 4 }	1.234
1.2345	{ "trimMantissa": true, "mantissa": 4 }	1.2345
1.23456	{ "trimMantissa": true, "mantissa": 4 }	1.2346
-10000	{ "thousandSeparated": true, "negative": "parenthesis", "mantissa": 4 }	(10,000.0000)
-0.23	{ "mantissa": 2 }	-0.23
-0.23	{ "negative": "parenthesis", "mantissa": 2 }	(0.23)
0.23	{ "mantissa": 5 }	0.23000
1230974	{ "average": true, "mantissa": 1}	1.2m
1460	{ "spaceSeparated": true, "average": true }	1 k
1	{ "output": "ordinal" }	1st
23	{ "output": "ordinal" }	23rd
52	{ "output": "ordinal" }	52nd
100	{ "output": "ordinal" }	100th

Average

numbro provides an easy mechanism to round up any number with the key average

Input Value	Format	Output Display
123	{ "average": true }	123
1234	{ "average": true }	1k
12345	{ "average": true }	12k
123456	{ "average": true }	123k
1234567	{ "average": true }	1m
12345678	{ "average": true }	12m
123456789	{ "average": true }	123m
1b	{ "average": true, "lowPrecision": false }	580m

In addition to this, when numbers are rounded up, one can specify the precision wanted with the key totalLength.

Input Value	Format	Output Display
1234567891	{ "average": true }	1b
1234567891	{ "average": true, "totalLength": 1 }	1b
1234567891	{ "average": true, "totalLength": 2 }	1.2b
1234567891	{ "average": true, "totalLength": 3 }	1.23b
1234567891	{ "average": true, "totalLength": 4 }	1.235b
1234567891	{ "average": true, "totalLength": 5 }	1.2346b
1234567891	{ "average": true, "totalLength": 6 }	1.23457b
1234567891	{ "average": true, "totalLength": 7 }	1.234568b
1234567891	{ "average": true, "totalLength": 8 }	1.2345679b
1234567891	{ "average": true, "totalLength": 9 }	1.23456789b
1234567891	{ "average": true, "totalLength": 10 }	1.234567891b

Percentages

Input Value	Format	Output Display
1	{ "output": "percent" }	100%
0.974878234	{ "output": "percent", "mantissa": 4 }	97.4878%
-0.43	{ "output": "percent", "spaceSeparated": true }	-43 %
0.43	{ "output": "percent", "mantissa": 3, "negative": "parenthesis", "spaceSeparated": true }	43.000 %

Time

Input Value	Format	Output Display
25	{ "output": "time" }	0:00:25
238	{ "output": "time" }	0:03:58
63846	{ "output": "time" }	17:44:06

Bytes

Input Value	Format	Output Display
100	{ "output": "byte", "base": "binary" }	100B
2048	{ "output": "byte", "base": "binary", "spaceSeparated": true }	2 KiB
7884486213	{ "output": "byte", "base": "binary", "mantissa": 1 }	7.3GiB
3467479682787	{ "output": "byte", "base": "binary", "mantissa": 3, "spaceSeparated": true }	3.154 TiB