Search results

Globalization in Blazor Maps component

Maps provides support for internationalization for the below elements.

  • Datalabel
  • Tooltip


Globalization is the process of designing and developing an component that works in different cultures/locales. Internationalization library is used to globalize number, date, time values in Maps component using LoadCldrData method.

Numeric Format

In the below example tooltip is globalized to Deutsch culture.

@using Syncfusion.Blazor.Maps

        <MapsLayer ShapeData='new {dataOptions= ""}'
                   DataSource="CountryData" Format="c"
                   ShapePropertyPath='new string[] {"name"}'
                   ShapeDataPath="Country" TValue="MapDataSource">
            <MapsShapeSettings Fill="#E5E5E5" colorValuePath="Membership">
                    <MapsColorMapping Value="Permanent" Color='new string[] {"#D84444"}' />
                    <MapsColorMapping Value="Non-Permanent" Color='new string[] {"#316DB5"}' />
            <MapsLayerTooltipSettings Visible="true" ValuePath="Population"></MapsLayerTooltipSettings>
    <MapsLegendSettings Visible="true"></MapsLegendSettings>

@code {
    public class MapDataSource
        public string Country { get; set; }
        public string Membership { get; set; }
        public double Population { get; set; }
    public List<MapDataSource> CountryData = new List<MapDataSource>{
         new MapDataSource {  Country= "China", Membership= "Permanent", Population=20},
         new MapDataSource { Country= "France",Membership= "Permanent", Population=30 },
         new MapDataSource { Country= "Russia",Membership= "Permanent", Population=40},
         new MapDataSource { Country= "Kazakhstan",Membership= "Non-Permanent", Population=50},
         new MapDataSource { Country= "Poland",Membership= "Non-Permanent", Population=60},
         new MapDataSource { Country= "Sweden",Membership= "Non-Permanent", Population=70}
    protected IJSRuntime JsRuntime { get; set; }
    protected override void OnAfterRender()
        this.JsRuntime.Sf().LoadCldrData(new string[]{"ca-gregorian.json",

Maps Sample