Search results

Globalization

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">
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                   DataSource='@CountryData'
                   ShapePropertyPath='@("name")'
                   ShapeDataPath="Country">
            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
                <MapsShapeColorMappings>
                    <MapsShapeColorMapping Value="Permanent" Color='@("#D84444")' />
                    <MapsShapeColorMapping Value="Non-Permanent" Color='@("#316DB5")' />
                </MapsShapeColorMappings>
            </MapsShapeSettings>
            <MapsLayerTooltipSettings Visible="true" ValuePath="Population"></MapsLayerTooltipSettings>
        </MapsLayer>
    </MapsLayers>
    <MapsLegendSettings Visible="true"></MapsLegendSettings>
</EjsMaps>

@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 }
    };
    [Inject]
    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