menu

MAUI

  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class ColorMapping - MAUI API Reference | Syncfusion

    Show / Hide Table of Contents

    Class ColorMapping

    Represents the base class for EqualColorMapping and RangeColorMapping.

    Inheritance
    System.Object
    ColorMapping
    EqualColorMapping
    RangeColorMapping
    Namespace: Syncfusion.Maui.Maps
    Assembly: Syncfusion.Maui.Maps.dll
    Syntax
    public abstract class ColorMapping : BindableObject

    Constructors

    ColorMapping()

    Declaration
    protected ColorMapping()

    Fields

    ColorProperty

    Identifies the Color bindable property.

    Declaration
    public static readonly BindableProperty ColorProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for Color bindable property.

    TextProperty

    Identifies the Text bindable property.

    Declaration
    public static readonly BindableProperty TextProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for Text bindable property.

    Properties

    Color

    Gets or sets the color that applies to the shape or bubble based on the value.

    Declaration
    public Color Color { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Graphics.Color

    The color value.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color = Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    maps.Layer = layer;
    this.Content = maps;

    Text

    Gets or sets the text to be used for the shape or bubble legend item.

    Declaration
    public string Text { get; set; }
    Property Value
    Type Description
    System.String

    The value to be displayed in legend item.

    Examples
    • XAML
    • C#
    <map:SfMaps>
       <map:SfMaps.Layer>
          <map:MapShapeLayer x:Name="layer"
                             ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                             ShapeFill="Gray"
                             ShapeStroke="White"
                             ShapeStrokeThickness="2"
                             DataSource="{Binding WorldPopulationDensity}"
                             ShapeDataField="name"
                             PrimaryValuePath="CountryName"
                             ShapeColorValuePath="Density">
    
             <map:MapShapeLayer.ColorMappings>
                 <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                 <map:RangeColorMapping Color="#3366ff" From="100" To="500" Text="100-500" />
                 <map:RangeColorMapping Color="#0039e6" From="500" To="1000" Text="500-1000" />
                 <map:RangeColorMapping Color="#002db3" From="1000" To="5000" Text="1000-5000" />
                 <map:RangeColorMapping Color="#001a66" From="5000" To="50000" Text="5000-50000" />
             </map:MapShapeLayer.ColorMappings>
    
          </map:MapShapeLayer>
       </map:SfMaps.Layer>
    </map:SfMaps>
    SfMaps maps = new SfMaps();
    MapShapeLayer layer = new MapShapeLayer();
    RangeViewModel rangeViewModel = new RangeViewModel();
    this.BindingContext = new RangeViewModel();
    layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    layer.ShapeFill = Colors.Gray;
    layer.ShapeStroke = Colors.White;
    layer.ShapeStrokeThickness = 2;
    layer.DataSource = rangeViewModel.WorldPopulationDensity;
    layer.ShapeDataField = "name";
    layer.PrimaryValuePath="CountryName";
    layer.ShapeColorValuePath="Density";
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 500;
    colorMapping2.Text = "100-500";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 500;
    colorMapping3.To = 1000;
    colorMapping3.Text = "500-1000";
    RangeColorMapping colorMapping4 = new RangeColorMapping();
    colorMapping4.Color = Color.FromRgb(0, 45, 179);
    colorMapping4.From = 1000;
    colorMapping4.To = 5000;
    colorMapping4.Text = "1000-5000";
    RangeColorMapping colorMapping5 = new RangeColorMapping();
    colorMapping5.Color = Color.FromRgb(0, 26, 102);
    colorMapping5.From = 5000;
    colorMapping5.To = 50000;
    colorMapping5.Text = "5000-50000";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    layer.ColorMappings.Add(colorMapping4);
    layer.ColorMappings.Add(colorMapping5);
    maps.Layer = layer;
    this.Content = maps;
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved