- Why use number localisation?
- Example localisations
- Script localisations
- Localising the result of math calculations in an equation
- Retaining raw number values for use in links
- Example map
Why use number localisation?
To use number fields in Mango for visualisation styling and reporting, they must be stored in the data table in latin numerals. That is to say 0 - 9.
Mango offers basic formatting options to allow you to transform the display of numbers into various number formats for decimals, currencies, and dates.
If your audience require or is more familiar with other number formats in the feature popup window, or you want to display a custom currency, you can display language sensitive number formatting using the .toLocaleString() method for your numeric attribute within an equation wrapper.
Syntax
Add the following equation to your custom popup, where X is the attribute placeholder and Y is the Locale code.
#{ (X).toLocaleString('Y') }#
eg.
#{ (1000).toLocaleString('en-GB') }#
= 1,000
#{ (1000).toLocaleString('de-DE') }#
= 1.000
See here for a full list of locale codes, though note that not all locales and scripts are supported at this time.
Example localisations
Here is a brief list of examples that will display numerical values with localised decimal separators, thousand separators, and a selection of scripts.
123,456,789.01
Comma digit group separators, point decimal separator.
UK
#{ ({attribute}).toLocaleString('en-GB') }#
US
#{ ({attribute}).toLocaleString('en-US') }#
123 456 789,01
Space digit group separators, comma decimal separator.
France
#{ ({attribute}).toLocaleString('fr-FR') }#
Russia
#{ ({attribute}).toLocaleString('ru-RU') }#
123.456.789,01
Point digit group separators, comma decimal separator
Germany
#{ ({attribute}).toLocaleString('de-DE') }#
12,34,56,789.01
Lakh separators
India
#{ ({attribute}).toLocaleString('en-IN') }#
Scripts
For selected scripts, it's possible to display latin numerals in other scripts along with the localised digit and decimal separators. The locale code required varies between various scripts, as shown below.
Your device must support the chosen script for this to display correctly.
١٢٣٬٤٥٦٬٧٨٩٫٠١
Arabic script
#{ ({attribute}).toLocaleString('ar-EG') }#
۱۲۳٬۴۵۶٬۷۸۹٫۰۱
Persian script
#{ ({attribute}).toLocaleString('fa-AF') }#
๑๒๓,๔๕๖,๗๘๙.๐๑
Thai script
#{ ({attribute}).toLocaleString('th-TH-u-nu-thai') }#
१२,३४,५६,७८९.०१
Devanagari script
#{ ({attribute}).toLocaleString('hi-u-nu-deva') }#
一二三,四五六,七八九.〇一
Chinese (decimal format)
#{ ({attribute}).toLocaleString('zh-Hans-CN-u-nu-hanidec') }#
Localising the result of math calculations in an equation
Performing math calculations and displaying the output in a localised number format is also possible.
#{ (({attribute_x}/{attribute_y})).toLocaleString('fr-FR') }#
(24586/6548).toLocaleString('fr-FR')
= 3,75
Retaining raw number values for use in links
A benefit of using this method to localise numbers for your audience is to ensure that your data not only contains the raw numbers required by Mango for quantity styling, but also allows you to utilise a number field in a link URL.
Where you might ordinarily use the formatting tools to display the number in a more readable format, this formatting will introduce unwanted separators that will break the link URL.
For example, you have an {id} field in your data table. The attribute values are both useful to the user, and are required for to create links to an external document for each feature.
So, you can use the URL https://server.com/docs/{id}.pdf which will render in the popup for each feature using the unique id value. eg. https://server.com/docs/923549873.pdf
If you set the formatting for {id} to Number (whole), your URL would be rendered incorrectly:
https://server.com/docs/923,549,873.pdf
Using this localisation method, you can maintain the formatting as raw number so the URL doesn't break, and display a formatted value to the user:
<a href="https://server.com/docs/{id}.pdf">Document link</a>
ID: #{ ({id}).toLocaleString('en-US') }#
Example map
