Shapes Color Customization in UWP Maps

18 Nov 201810 minutes to read

The SfMap control provides extensive support for the customization of the shape’s color. The shape’s color can be customized using the following methods:

The important property that makes an impact on shape colors is AutoFillColors. This is a Boolean type property. This property is available in the FillSetting. The use of this property is explained in the following sections.

About ShapeFill, ShapeStroke, and ShapeStrokeThickness

The above mentioned properties are available in the ShapeSettings property of the ShapeFileLayer. ShapeSetting defines the basic customization settings of shapes in the map.

ShapeFill

ShapeFill is a Brush type property that sets the fill color of the shapes in the map.

ShapeStroke

ShapeStroke is also a Brush type property that sets the border color of the shape in the map.

ShapeStrokeThickness

ShapeStrokeThickness is a double type property that sets the border thickness of the shape in the map.

These settings work only when AutoFillColors is set to false.

  • HTML
    • <syncfusion:SfMap>
    <syncfusion:SfMap.Layers>
        <syncfusion:ShapeFileLayer Uri="MapApp.usa_st.shp">
            <syncfusion:ShapeFileLayer.ShapeSettings>
                <syncfusion:ShapeSetting ShapeFill="Gray" ShapeStroke="Black" ShapeStrokeThickness="1">
                    <syncfusion:ShapeSetting.FillSetting>
                        <syncfusion:ShapeFillSetting AutoFillColors="False"/>
                    </syncfusion:ShapeSetting.FillSetting>
                </syncfusion:ShapeSetting>
            </syncfusion:ShapeFileLayer.ShapeSettings>
        </syncfusion:ShapeFileLayer>
    </syncfusion:SfMap.Layers>
</syncfusion:SfMap>

    UWP Map Control Shapes Color Customization ShapeFill ShapeStroke ShapeStrokeThickness

    Tree map-like support

    ShapeFill is set based on the underlying values of the shape. This provides a tree map-like impact on the map UI. The RangeColorMapping property provides a tree map-like fill for the shapes.

    Range Color Mapping

    Range color mapping is one of the features used to differentiate the shape’s fill based on its underlying value and color ranges. Range color mapping contains the following properties:

    Property Type Description
    [Range](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.RangeColorMapping.html#Syncfusion_UI_Xaml_Maps_RangeColorMapping_Range) Double Gets or sets the value range of the bubble.
    [Color](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.ColorMapping.html#Syncfusion_UI_Xaml_Maps_ColorMapping_Color) Color Gets or sets the color values for the given range.

    The fill color of a particular shape is determined by its underlying value and color range. To provide a tree map-like impact on the map, the data binding should work properly. For example, consider the following color ranges.

  • HTML
    • <syncfusion:ShapeSetting ShapeFill="#E5E5E5" ShapeStroke="#C1C1C1" ShapeStrokeThickness="0.5" ShapeValuePath="Population">
    <syncfusion:ShapeSetting.FillSetting>
        <syncfusion:ShapeFillSetting AutoFillColors="False">
            <syncfusion:ShapeFillSetting.ColorMappings>
                <syncfusion:RangeColorMapping To="1500000000" From="750000000" Color="#2A91CF"/>
                <syncfusion:RangeColorMapping To="750000000" From="0" Color="#3D9FD8"/>
                <syncfusion:RangeColorMapping To="0" From="0" Color="#C7E9FA"/>
            </syncfusion:ShapeFillSetting.ColorMappings>
        </syncfusion:ShapeFillSetting>
    </syncfusion:ShapeSetting.FillSetting>
</syncfusion:ShapeSetting>

    AutoFillColors must be set to false to enable the range color mapping.

    The shape’s underlying object value must have a numeric property and should be mentioned in ShapeValuePath to work with this. The color between the given ranges is applied only to the shapes that have proper underlying values. The color for other shapes will be the ShapeFill’s color.

  • HTML
    • <syncfusion:SfMap>
    <syncfusion:SfMap.DataContext>
        <local:ViewModel/>
    </syncfusion:SfMap.DataContext>
    <syncfusion:SfMap.Layers>
        <syncfusion:ShapeFileLayer ItemsSource="{Binding Countries}" Uri="App2.world1.shp" ShapeIDPath="Country" ShapeIDTableField="NAME">
            <syncfusion:ShapeFileLayer.ShapeSettings>
                <syncfusion:ShapeSetting ShapeValuePath="Population">
                    <syncfusion:ShapeSetting.FillSetting>
                        <syncfusion:ShapeFillSetting AutoFillColors="False">
                            <syncfusion:ShapeFillSetting.ColorMappings>
                                <syncfusion:RangeColorMapping To="1500000000" From="750000000" Color="#2A91CF"/>
                                <syncfusion:RangeColorMapping To="750000000" From="0" Color="#3D9FD8"/>
                                <syncfusion:RangeColorMapping To="0" From="0" Color="#C7E9FA"/>
                            </syncfusion:ShapeFillSetting.ColorMappings>
                        </syncfusion:ShapeFillSetting>
                    </syncfusion:ShapeSetting.FillSetting>
                </syncfusion:ShapeSetting>
            </syncfusion:ShapeFileLayer.ShapeSettings>
        </syncfusion:ShapeFileLayer>
    </syncfusion:SfMap.Layers>
</syncfusion:SfMap>

    UWP Map Control Shapes Color Customization Range Color Mapping

    ColorPalette

    ColorPalette is a set of colors that are applied on the shapes. The map contains two built-in color palettes. They are:

    • Metro
    • CoolBlue
    • CustomPalette

    ColorPalette has to be set in the ShapeSetting’s ColorPalette property. ColorPalette is the enum property which accepts Metro, CoolBlue, and CustomPalette.

  • HTML
    • <syncfusion:SfMap>
    <syncfusion:SfMap.Layers>
        <syncfusion:ShapeFileLayer Uri="MapApp.usa_st.shp">
            <syncfusion:ShapeFileLayer.ShapeSettings>
                <syncfusion:ShapeSetting ColorPalette="Metro">
                    <syncfusion:ShapeSetting.FillSetting>
                        <syncfusion:ShapeFillSetting AutoFillColors="True"/>
                    </syncfusion:ShapeSetting.FillSetting>
                </syncfusion:ShapeSetting>
            </syncfusion:ShapeFileLayer.ShapeSettings>
        </syncfusion:ShapeFileLayer>
    </syncfusion:SfMap.Layers>
</syncfusion:SfMap>

    UWP Map Control Shapes Color Customization ColorPalette

    About CustomPalette

    Besides the built-in color palettes, custom colors can be defined for the color palette. The custom colors are defined in the CustomColors property in ShapeSetting. CustomColors is the collection property which accepts the MapColorPalette. To apply the custom colors, ColorPalette must be set to CustomPalette and CustomColors should be defined.

    About MapColorPalette

    MapColorPalette contains a property named FillBrush. This property sets the fill color of the shape when the custom palette is set.

  • HTML
    • <syncfusion:SfMap>
    <syncfusion:SfMap.Layers>
        <syncfusion:ShapeFileLayer Uri="MapApp.usa_st.shp">
            <syncfusion:ShapeFileLayer.ShapeSettings>
                <syncfusion:ShapeSetting ColorPalette="CustomPalette">
                    <syncfusion:ShapeSetting.CustomColors>
                        <syncfusion:MapColorPalette FillBrush="Gray"/>
                        <syncfusion:MapColorPalette FillBrush="Gold"/>
                        <syncfusion:MapColorPalette FillBrush="LightBlue"/>
                        <syncfusion:MapColorPalette FillBrush="LightCyan"/>
                    </syncfusion:ShapeSetting.CustomColors>
                    <syncfusion:ShapeSetting.FillSetting>
                        <syncfusion:ShapeFillSetting AutoFillColors="True"/>
                    </syncfusion:ShapeSetting.FillSetting>
                </syncfusion:ShapeSetting>
            </syncfusion:ShapeFileLayer.ShapeSettings>
        </syncfusion:ShapeFileLayer>
    </syncfusion:SfMap.Layers>
</syncfusion:SfMap>

    UWP Map Control Shapes Color Customization CustomPalette