The following properties are available in MapsShapeSettings
to customize the shapes of the Maps component.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
@* To customize map shape *@
<MapsShapeSettings Fill="#33CCFF">
<MapsShapeBorder Color="#FFFFFF" Width="2"></MapsShapeBorder>
</MapsShapeSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
To apply the default palette colors to shapes, enable the Autofill
property.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
@* To set shape color automatically *@
<MapsShapeSettings Autofill="true"></MapsShapeSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
To apply own custom palette to shapes, provide the palette colors to Palette
.
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
<MapsShapeSettings Autofill="true" Palette='new string[] {"#33CCFF", "#FF0000", "#800000", "#FFFF00", "#808000"}'>
</MapsShapeSettings>
</MapsLayer>
</MapsLayers>
</SfMaps>
For more customization, see Color mapping
feature.
By default, the Maps component is rendered with Mercator projection type. In this type, the maps are rendered based on coordinates, so it is not stretched.
The Maps component has the following projection types:
@using Syncfusion.Blazor.Maps
@* To change Maps projection *@
<SfMaps ProjectionType="ProjectionType.Miller">
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
</MapsLayer>
</MapsLayers>
</SfMaps>