Globalization in Blazor Maps Component

8 Sep 20214 minutes to read

Maps provide support for internationalization for the below elements.

  • Data label
  • Tooltip

Globalization

Globalization is the process of designing and developing a component that works in different cultures/locales. It can be provided to the Blazor server-side and client-side applications. Refer to Blazor server-side and Blazor client-side sections for configuring the globalization for the Maps component. It is used to globalize number, date, time values in
Maps component using Format property in the Maps component.

@using Syncfusion.Blazor.Maps

<SfMaps Format="n0">
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' DataSource="CountryData"
                   ShapePropertyPath='new string[] {"name"}' ShapeDataPath="Country" TValue="MapDataSource" >
            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
                <MapsShapeColorMappings>
                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#D84444"}' />
                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#316DB5"}' />
                </MapsShapeColorMappings>
            </MapsShapeSettings>
            <MapsLayerTooltipSettings Visible="true" ValuePath="Population"></MapsLayerTooltipSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@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=20000 },
        new MapDataSource { Country= "France",Membership= "Permanent", Population=30000  },
        new MapDataSource { Country= "Russia",Membership= "Permanent", Population=40000 },
        new MapDataSource { Country= "Kazakhstan",Membership= "Non-Permanent", Population=50000 },
        new MapDataSource { Country= "Poland",Membership= "Non-Permanent", Population=60000 },
        new MapDataSource { Country= "Sweden",Membership= "Non-Permanent", Population=70000 }
    };
}

Maps Sample

Numeric Format

The numeric formats such as currency, percentage and so on can be displayed in the tooltip and data labels of the Maps using the Format property in the SfMaps class. In the below example, the tooltip is globalized to German culture. When setting the UseGroupingSeparator property as true, the numeric text in the Maps separates with the comma separator.

@using Syncfusion.Blazor.Maps

<SfMaps Format="c" UseGroupingSeparator="true">
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                   DataSource="CountryData" ShapePropertyPath='new string[] {"name"}' ShapeDataPath="Country" TValue="MapDataSource" >
            <MapsShapeSettings Fill="#E5E5E5" ColorValuePath="Membership">
                <MapsShapeColorMappings>
                    <MapsShapeColorMapping Value="Permanent" Color='new string[] {"#D84444"}' />
                    <MapsShapeColorMapping Value="Non-Permanent" Color='new string[] {"#316DB5"}' />
                </MapsShapeColorMappings>
            </MapsShapeSettings>
            <MapsLayerTooltipSettings Visible="true" ValuePath="Population"></MapsLayerTooltipSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@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= 38332521},
        new MapDataSource { Country= "France", Membership= "Permanent", Population= 19651127 },
        new MapDataSource { Country= "Russia", Membership= "Permanent", Population= 3090416},
        new MapDataSource { Country= "Kazakhstan", Membership= "Non-Permanent", Population= 1232521},
        new MapDataSource { Country= "Poland", Membership= "Non-Permanent", Population= 90332521},
        new MapDataSource { Country= "Sweden", Membership= "Non-Permanent", Population= 383521}
    };
}

Maps Sample

See also