Search results


The internationalization library provides support for formatting and parsing the number using the official Unicode CLDR JSON data and also provides the loadCldr method to load the culture-specific CLDR JSON data. The Maps component comes with built-in internationalization support to adapt to different cultures.

By default, all the Blazor components are specific to the English culture (‘en-US’). If you need a different culture, follow the given steps:

  • Install the CLDR-Data package using the following command (it installs the CLDR JSON data).
npm install cldr-data --save

To know more about CLDR-Data, refer to CLDR-Data.

After the package has been installed, you can find the culture-specific JSON data under the following location: \node_modules\cldr-data\main, and then copy the required cldr-data file into the wwwroot\cldr-data folder.

The Maps component supports internationalization to the following elements:

  • Data labels
  • Tooltips

The following code example demonstrates how to globalize tooltip to the Deutsch culture.

@using Syncfusion.EJ2.Blazor.Maps

@* To set number format as currency *@
<EjsMaps Format="c">
        <MapsLayer ShapeData='new {dataOptions= ""}'
            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
                    <MapsShapeColorMapping Value="Permanent" Color='@("#D84444")' />
                    <MapsShapeColorMapping Value="Non-Permanent" Color='@("#316DB5")' />
            <MapsLayerTooltipSettings Visible="true" ValuePath="Population"></MapsLayerTooltipSettings>
    <MapsLegendSettings Visible="true"></MapsLegendSettings>

@code {
    public class MapDataSource
        public string Country;
        public string Membership;
        public double Population;
    public List<MapDataSource> CountryData = new List<MapDataSource>{
         new MapDataSource {  Country= "China", Membership= "Permanent", Population=1420300109},
         new MapDataSource { Country= "France",Membership= "Permanent", Population=65493099 },
         new MapDataSource { Country= "Russia",Membership= "Permanent", Population= 143892123},
         new MapDataSource { Country= "Kazakhstan",Membership= "Non-Permanent", Population=18195900},
         new MapDataSource { Country= "Poland",Membership= "Non-Permanent", Population= 38024422},
         new MapDataSource { Country= "Sweden",Membership= "Non-Permanent", Population= 10056349 }
    protected IJSRuntime JsRuntime { get; set; }
    protected override void OnAfterRender()
        //To load cldr culture data and set german culture
        this.JsRuntime.Ejs().LoadCldrData(new string[] { "wwwroot/cldr-data/currencies.json", "wwwroot/cldr-data/numbers.json" }).SetCulture("de");

Maps with globalization support