Class MapShapeSublayer
The shape sub layer for MapShapeLayer and MapTileLayer.
The actual geographical rendering is done here using the ShapesSource property. The shape source can be set as the GeoJSON file or shapefile from the local file, URL, Stream or Resource.
The ShapeDataField property is used to refer the unique field name in the GeoJSON file or shapefile to identify each shapes and map with the respective data in the data source.
By default, the value specified for the ShapeDataField in the GeoJSON or shapefile will be used in the elements like data labels, tooltip, and legend for their respective shapes.
However, it is possible to keep a data source and customize these elements based on the requirement. The value of the
ShapeDataField will be used to map with the respective data returned in
PrimaryValuePath from the data source.
Once the above mapping is done, you can customize the elements data label, color mapping etc.
Implements
Namespace: Syncfusion.Maui.Maps
Assembly: Syncfusion.Maui.Maps.dll
Syntax
public class MapShapeSublayer : MapSublayer, IShapeLayer, IThemeElement
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True">
<map:MapShapeSublayer.ColorMappings>
<map:RangeColorMapping Color="#809fff" From="0" To="100" />
<map:RangeColorMapping Color="#3366ff" From="100" To="500" />
<map:RangeColorMapping Color="#0039e6" From="500" To="1000" />
<map:RangeColorMapping Color="#002db3" From="1000" To="5000" />
<map:RangeColorMapping Color="#001a66" From="5000" To="50000" />
</map:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
Constructors
MapShapeSublayer()
Initializes a new instance of the MapShapeSublayer class.
Declaration
public MapShapeSublayer()
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True">
<map:MapShapeSublayer.ColorMappings>
<map:RangeColorMapping Color="#809fff" From="0" To="100" />
<map:RangeColorMapping Color="#3366ff" From="100" To="500" />
<map:RangeColorMapping Color="#0039e6" From="500" To="1000" />
<map:RangeColorMapping Color="#002db3" From="1000" To="5000" />
<map:RangeColorMapping Color="#001a66" From="5000" To="50000" />
</map:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
</MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
Fields
BubbleSettingsProperty
Identifies the BubbleSettings bindable property.
Declaration
public static readonly BindableProperty BubbleSettingsProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for BubbleSettings bindable property. |
BubbleTooltipSettingsProperty
Identifies the BubbleTooltipSettings bindable property.
Declaration
public static readonly BindableProperty BubbleTooltipSettingsProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for BubbleTooltipSettings bindable property. |
BubbleTooltipTemplateProperty
Identifies the BubbleTooltipTemplate bindable property.
Declaration
public static readonly BindableProperty BubbleTooltipTemplateProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for BubbleTooltipTemplate bindable property. |
ColorMappingsProperty
Identifies the ColorMappings bindable property.
Declaration
public static readonly BindableProperty ColorMappingsProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ColorMappings bindable property. |
DataLabelSettingsProperty
Identifies the DataLabelSettings bindable property.
Declaration
public static readonly BindableProperty DataLabelSettingsProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for DataLabelSettings bindable property. |
DataSourceProperty
Identifies the DataSource bindable property.
Declaration
public static readonly BindableProperty DataSourceProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for DataSource bindable property. |
EnableSelectionProperty
Identifies the EnableSelection bindable property.
Declaration
public static readonly BindableProperty EnableSelectionProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for EnableSelection bindable property. |
PrimaryValuePathProperty
Identifies the PrimaryValuePath bindable property.
Declaration
public static readonly BindableProperty PrimaryValuePathProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for PrimaryValuePath bindable property. |
SelectedItemsProperty
Identifies the SelectedItems bindable property.
Declaration
public static readonly BindableProperty SelectedItemsProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for SelectedItems bindable property. |
SelectedShapeFillProperty
Identifies the SelectedShapeFill bindable property.
Declaration
public static readonly BindableProperty SelectedShapeFillProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for SelectedShapeFill bindable property. |
SelectedShapeStrokeProperty
Identifies the SelectedShapeStroke bindable property.
Declaration
public static readonly BindableProperty SelectedShapeStrokeProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for SelectedShapeStroke bindable property. |
SelectedShapeStrokeThicknessProperty
Identifies the SelectedShapeStrokeThickness bindable property.
Declaration
public static readonly BindableProperty SelectedShapeStrokeThicknessProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for SelectedShapeStrokeThickness bindable property. |
SelectionModeProperty
Identifies the SelectionMode bindable property.
Declaration
public static readonly BindableProperty SelectionModeProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for SelectionMode bindable property. |
ShapeColorValuePathProperty
Identifies the ShapeColorValuePath bindable property.
Declaration
public static readonly BindableProperty ShapeColorValuePathProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShapeColorValuePath bindable property. |
ShapeDataFieldProperty
Identifies the ShapeDataField bindable property.
Declaration
public static readonly BindableProperty ShapeDataFieldProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShapeDataField bindable property. |
ShapeFillProperty
Identifies the ShapeFill bindable property.
Declaration
public static readonly BindableProperty ShapeFillProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShapeFill bindable property. |
ShapeHoverFillProperty
Identifies the ShapeHoverFill bindable property.
Declaration
public static readonly BindableProperty ShapeHoverFillProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShapeHoverFill bindable property. |
ShapeHoverStrokeProperty
Identifies the ShapeHoverStroke bindable property.
Declaration
public static readonly BindableProperty ShapeHoverStrokeProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShapeHoverStroke bindable property. |
ShapeHoverStrokeThicknessProperty
Identifies the ShapeHoverStrokeThickness bindable property.
Declaration
public static readonly BindableProperty ShapeHoverStrokeThicknessProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShapeHoverStrokeThickness bindable property. |
ShapesSourceProperty
Identifies the ShapesSource bindable property.
Declaration
public static readonly BindableProperty ShapesSourceProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShapesSource bindable property. |
ShapeStrokeProperty
Identifies the ShapeStroke bindable property.
Declaration
public static readonly BindableProperty ShapeStrokeProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShapeStroke bindable property. |
ShapeStrokeThicknessProperty
Identifies the ShapeStrokeThickness bindable property.
Declaration
public static readonly BindableProperty ShapeStrokeThicknessProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShapeStrokeThickness bindable property. |
ShapeTooltipSettingsProperty
Identifies the ShapeTooltipSettings bindable property.
Declaration
public static readonly BindableProperty ShapeTooltipSettingsProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShapeTooltipSettings bindable property. |
ShapeTooltipTemplateProperty
Identifies the ShapeTooltipTemplate bindable property.
Declaration
public static readonly BindableProperty ShapeTooltipTemplateProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShapeTooltipTemplate bindable property. |
ShowBubblesProperty
Identifies the ShowBubbles bindable property.
Declaration
public static readonly BindableProperty ShowBubblesProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShowBubbles bindable property. |
ShowBubbleTooltipProperty
Identifies the ShowBubbleTooltip bindable property.
Declaration
public static readonly BindableProperty ShowBubbleTooltipProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShowBubbleTooltip bindable property. |
ShowDataLabelsProperty
Identifies the ShowDataLabels bindable property.
Declaration
public static readonly BindableProperty ShowDataLabelsProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShowDataLabels bindable property. |
ShowShapeTooltipProperty
Identifies the ShowShapeTooltip bindable property.
Declaration
public static readonly BindableProperty ShowShapeTooltipProperty
Field Value
Type | Description |
---|---|
Microsoft.Maui.Controls.BindableProperty | The identifier for ShowShapeTooltip bindable property. |
Properties
BubbleSettings
Gets or sets the map bubble settings to customizing the bubbles of map shapes.
Declaration
public MapBubbleSettings BubbleSettings { get; set; }
Property Value
Type | Description |
---|---|
MapBubbleSettings | The bubble settings. The default is |
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
<map:/MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
BubbleTooltipSettings
Gets or sets bubble tooltip settings that allows to customize the bubble tooltip appearance.
Declaration
public MapTooltipSettings BubbleTooltipSettings { get; set; }
Property Value
Type | Description |
---|---|
MapTooltipSettings | This property takes MapTooltipSettings instance as value and its default value is null. |
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True"
EnableSelection="True"
SelectedShapeFill="Yellow"
SelectedShapeStroke="Red"
SelectedShapeStrokeThickness="2"
ShapeHoverFill="DarkGray"
ShapeHoverStroke="Yellow"
ShapeHoverStrokeThickness="1"
ShowShapeTooltip="True"
ShowBubbleTooltip="True">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
<map:MapShapeSublayer.BubbleTooltipSettings>
<map:MapTooltipSettings Background="White"
Padding="2">
<map:MapTooltipSettings.TextStyle>
<map:MapLabelStyle FontSize="12"
TextColor="Black"
FontAttributes="Italic" />
</map:MapTooltipSettings.TextStyle>
</map:MapTooltipSettings>
</map:MapShapeSublayer.BubbleTooltipSettings>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
BubbleTooltipTemplate
Gets or sets the data template to customize the visual representation of bubble tooltip.
Declaration
public DataTemplate BubbleTooltipTemplate { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Controls.DataTemplate | The template for the bubble tooltip. It also supports DataTemplateSelector. The default is |
Remarks
The corresponding MapTooltipInfo of the current bubble is the BindingContext of BubbleTooltipTemplate.
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True"
EnableSelection="True"
SelectedShapeFill="Yellow"
SelectedShapeStroke="Red"
SelectedShapeStrokeThickness="2"
ShapeHoverFill="DarkGray"
ShapeHoverStroke="Yellow"
ShapeHoverStrokeThickness="1"
ShowShapeTooltip="True"
ShowBubbleTooltip="True">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
<map:MapShapeSublayer.ShapeTooltipTemplate>
<DataTemplate>
<HorizontalStackLayout>
<Label Text="{Binding DataItem.CountryName}"
TextColor="White" />
<Label Text=":"
TextColor="White"
Margin="2,0,2,0"/>
<Label Text="{Binding DataItem.Density}"
TextColor="White" />
<Label Text="per sq. km."
TextColor="White"
Margin="2,0,0,0" />
</HorizontalStackLayout>
</DataTemplate>
</map:MapShapeSublayer.ShapeTooltipTemplate>
<map:MapShapeSublayer.BubbleTooltipTemplate>
<DataTemplate>
<HorizontalStackLayout>
<Label Text="{Binding DataItem.CountryName}"
TextColor="White" />
<Label Text=":"
TextColor="White"
Margin="2,0,2,0"/>
<Label Text="{Binding DataItem.Density}"
TextColor="White" />
<Label Text="per sq. km."
TextColor="White"
Margin="2,0,0,0" />
</HorizontalStackLayout>
</DataTemplate>
</map:MapShapeSublayer.BubbleTooltipTemplate>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
ColorMappings
Gets or sets the collection of ColorMapping which specifes shape's color based on the data.
Declaration
public ObservableCollection<ColorMapping> ColorMappings { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.ObjectModel.ObservableCollection<ColorMapping> | ObservableCollection of ColorMapping. The default value is empty collection. |
Remarks
It provides option to set the shape color based on the specific Value or the range of values which falls between From and To.
Based on the values, legend items will be rendered. The text of legend item will be Text of the ColorMapping.
Examples
<map:SfMaps>
<map:SfMaps.BindingContext>
<local:RangeViewModel/>
</map:SfMaps.BindingContext>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
DataLabelSettings
Gets or sets the data label settings to customizing the data labels of map shapes.
Declaration
public MapDataLabelSettings DataLabelSettings { get; set; }
Property Value
Type | Description |
---|---|
MapDataLabelSettings | The data label settings. The default is |
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
DataSource
Gets or sets the data source value to the shape layer of the maps. Its used to render bubbles, data labels, shape colors in their respective shape's coordinates.
Declaration
public object DataSource { get; set; }
Property Value
Type | Description |
---|---|
System.Object | The collection of data source. The default is |
Examples
<map:SfMaps>
<map:SfMaps.BindingContext>
<local:RangeViewModel/>
</map:SfMaps.BindingContext>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"/>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
EnableSelection
Gets or sets a value indicate whether the selection is enabled or not.
Declaration
public bool EnableSelection { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if shape selection is enabled; otherwise, false. The default value is false. |
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True"
EnableSelection="True"
SelectedShapeFill="Yellow"
SelectedShapeStroke="Red"
SelectedShapeStrokeThickness="2">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
PrimaryValuePath
Gets or sets primary value for the data in the DataSource collection.
Declaration
public string PrimaryValuePath { get; set; }
Property Value
Type | Description |
---|---|
System.String | The primary value path of the DataSource. The default value is string.Empty. |
Remarks
This primary value will be mapped with the ShapeDataField value in the respective shape detail in the GeoJSON file or shapefile. This mapping will then be used in the rendering of bubbles, data labels, shape colors, tooltip in their respective shape's coordinates.
Examples
<map:SfMaps>
<map:SfMaps.BindingContext>
<local:RangeViewModel/>
</map:SfMaps.BindingContext>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"/>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
SelectedItems
Gets or sets to create instance of sublayer collection.
Declaration
public ObservableCollection<object> SelectedItems { get; set; }
Property Value
Type |
---|
System.Collections.ObjectModel.ObservableCollection<System.Object> |
SelectedShapeFill
Gets or sets the brush that paints the interior of the selected shape.
Declaration
public Brush SelectedShapeFill { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Controls.Brush | A |
Remarks
- If SelectedShapeFill is Microsoft.Maui.Graphics.Colors.Transparent, then the selection effect will be disabled.
- If SelectedShapeFill is
null
, then the saturated ShapeFill color will be applied when selecting the shape.
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True"
EnableSelection="True"
SelectedShapeFill="Yellow">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
SelectedShapeStroke
Gets or sets the Brush
that specifies how the selected shape outline to be painted.
Declaration
public Brush SelectedShapeStroke { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Controls.Brush | A |
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True"
EnableSelection="True"
SelectedShapeFill="Yellow"
SelectedShapeStroke="Red">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
SelectedShapeStrokeThickness
Gets or sets the value that specifies the width of the selected shape stroke outline.
Declaration
public double SelectedShapeStrokeThickness { get; set; }
Property Value
Type | Description |
---|---|
System.Double | It specifies the width of the map selected shape stroke outline. The default value is 1. |
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True"
EnableSelection="True"
SelectedShapeFill="Yellow"
SelectedShapeStroke="Red"
SelectedShapeStrokeThickness="2">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
SelectionMode
Gets or sets the selection type of the shape.
Declaration
public MapSelectionMode SelectionMode { get; set; }
Property Value
Type |
---|
MapSelectionMode |
ShapeColorValuePath
Gets or sets the field value to be fetched from data for each shape used to determine the shape color in the shape layer of the maps.
Declaration
public string ShapeColorValuePath { get; set; }
Property Value
Type | Description |
---|---|
System.String | The color value path of shapes. The default value is string.Empty. |
Remarks
If the field represents direct color value, then the color is applied to shape; otherwise, the shape color applied based on the specific Value or the range of values which falls between From and To in the ColorMappings.
Examples
<map:SfMaps>
<map:SfMaps.BindingContext>
<local:RangeViewModel/>
</map:SfMaps.BindingContext>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
ShapeDataField
Gets or sets the primary field name in the GeoJSON file or shapefile to identify each shape.
Declaration
public string ShapeDataField { get; set; }
Property Value
Type | Description |
---|---|
System.String | The shape data field value. The default value is string.Empty. |
Remarks
It is used to refer the field name in the GeoJSON file or shapefile to identify each shape and map that shape with the respective data in the data source.
Examples
<map:SfMaps>
<map:SfMaps.BindingContext>
<local:RangeViewModel/>
</map:SfMaps.BindingContext>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"/>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
ShapeFill
Gets or sets the Brush
that paints the interior of the shape.
Declaration
public Brush ShapeFill { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Controls.Brush | A |
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"/>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
ShapeHoverFill
Gets or sets the Brush
that paints the interior of the mouse hovered shape on desktop.
Declaration
public Brush ShapeHoverFill { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Controls.Brush | A |
Remarks
- If ShapeHoverFill is Microsoft.Maui.Graphics.Colors.Transparent, then the hover effect will be disabled.
- If ShapeHoverFill is
null
, then the saturated ShapeFill color will be applied when hovering the shape.
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True"
EnableSelection="True"
SelectedShapeFill="Yellow"
SelectedShapeStroke="Red"
SelectedShapeStrokeThickness="2"
ShapeHoverFill="DarkGray">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
ShapeHoverStroke
Gets or sets the Brush
that specifies how the mouse hovered shape outline to be painted on desktop.
Declaration
public Brush ShapeHoverStroke { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Controls.Brush | A |
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True"
EnableSelection="True"
SelectedShapeFill="Yellow"
SelectedShapeStroke="Red"
SelectedShapeStrokeThickness="2"
ShapeHoverFill="DarkGray"
ShapeHoverStroke="Yellow">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
ShapeHoverStrokeThickness
Gets or sets the value that specifies the width of the mouse hovered shape stroke outline on desktop.
Declaration
public double ShapeHoverStrokeThickness { get; set; }
Property Value
Type | Description |
---|---|
System.Double | It specifies the width of the map shape stroke outline while hovered. The default value is double.NaN. |
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True"
EnableSelection="True"
SelectedShapeFill="Yellow"
SelectedShapeStroke="Red"
SelectedShapeStrokeThickness="2"
ShapeHoverFill="DarkGray"
ShapeHoverStroke="Yellow"
ShapeHoverStrokeThickness="1">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
ShapesSource
Gets or sets the source of the map shapes. The shape source can be set as the GeoJSON file or shapefile from the local file, URL, stream or embedded resource path.
Declaration
public MapSource ShapesSource { get; set; }
Property Value
Type | Description |
---|---|
MapSource | The MapSource representing the shape source. The default is |
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"/>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
ShapeStroke
Gets or sets the Brush
that specifies how the shape outline to be painted.
Declaration
public Brush ShapeStroke { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Controls.Brush | A |
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"/>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
ShapeStrokeThickness
Gets or sets the value that specifies the width of the shape stroke outline.
Declaration
public double ShapeStrokeThickness { get; set; }
Property Value
Type | Description |
---|---|
System.Double | It specifies the width of the map shape stroke outline. The default value is 0.5. |
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"/>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
ShapeTooltipSettings
Gets or sets shape tooltip settings that allows to customize the shape tooltip appearance.
Declaration
public MapTooltipSettings ShapeTooltipSettings { get; set; }
Property Value
Type | Description |
---|---|
MapTooltipSettings | This property takes MapTooltipSettings instance as value and its default value is null. |
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True"
EnableSelection="True"
SelectedShapeFill="Yellow"
SelectedShapeStroke="Red"
SelectedShapeStrokeThickness="2"
ShapeHoverFill="DarkGray"
ShapeHoverStroke="Yellow"
ShapeHoverStrokeThickness="1"
ShowShapeTooltip="True"
ShowBubbleTooltip="True">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
<map:MapShapeSublayer.ShapeTooltipSettings>
<map:MapTooltipSettings Background="White"
Padding="2">
<map:MapTooltipSettings.TextStyle>
<map:MapLabelStyle FontSize="12"
TextColor="Black"
FontAttributes="Italic" />
</map:MapTooltipSettings.TextStyle>
</map:MapTooltipSettings>
</map:MapShapeSublayer.ShapeTooltipSettings>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
ShapeTooltipTemplate
Gets or sets the data template to customize the visual representation of shape tooltip.
Declaration
public DataTemplate ShapeTooltipTemplate { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.Maui.Controls.DataTemplate | The template for the shape tooltip. It also supports DataTemplateSelector. The default is |
Remarks
The corresponding MapTooltipInfo of the current shape is the BindingContext of ShapeTooltipTemplate.
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True"
EnableSelection="True"
SelectedShapeFill="Yellow"
SelectedShapeStroke="Red"
SelectedShapeStrokeThickness="2"
ShapeHoverFill="DarkGray"
ShapeHoverStroke="Yellow"
ShapeHoverStrokeThickness="1"
ShowShapeTooltip="True"
ShowBubbleTooltip="True">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
<map:MapShapeSublayer.ShapeTooltipTemplate>
<DataTemplate>
<HorizontalStackLayout>
<Label Text="{Binding DataItem.CountryName}"
TextColor="White" />
<Label Text=":"
TextColor="White"
Margin="2,0,2,0"/>
<Label Text="{Binding DataItem.Density}"
TextColor="White" />
<Label Text="per sq. km."
TextColor="White"
Margin="2,0,0,0" />
</HorizontalStackLayout>
</DataTemplate>
</map:MapShapeSublayer.ShapeTooltipTemplate>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
ShowBubbles
Gets or sets a value indicating whether bubbles will be showed or not.
Declaration
public bool ShowBubbles { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if shown bubbles; otherwise, false. The default value is false. |
Remarks
ShowBubbles decides whether the bubbles to be shown or not.
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
<map:/MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
ShowBubbleTooltip
Gets or sets a value indicating whether the bubble tooltip will be showed or not.
Declaration
public bool ShowBubbleTooltip { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if bubble tooltip is shown; otherwise, false. The default value is false. |
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True"
EnableSelection="True"
SelectedShapeFill="Yellow"
SelectedShapeStroke="Red"
SelectedShapeStrokeThickness="2"
ShapeHoverFill="DarkGray"
ShapeHoverStroke="Yellow"
ShapeHoverStrokeThickness="1"
ShowShapeTooltip="True"
ShowBubbleTooltip="True">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
ShowDataLabels
Gets or sets a value indicating whether data labels will be showed or not.
Declaration
public bool ShowDataLabels { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if the data labels shown; otherwise, false. The default value is false. |
Remarks
ShowDataLabels decides whether the data labels to be shown or not.
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:/MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
ShowShapeTooltip
Gets or sets a value indicating whether the shape tooltip will be showed or not.
Declaration
public bool ShowShapeTooltip { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if shape tooltip is shown; otherwise, false. The default value is false. |
Examples
<map:SfMaps>
<map:SfMaps.Layer>
<map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
<map:MapShapeLayer.Sublayers>
<map:MapShapeSublayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/australia.json"
ShapeFill="LightGreen"
ShapeStroke="Green"
ShapeStrokeThickness="0.5"
DataSource="{Binding PopulationDensity}"
ShapeDataField="STATE_NAME"
PrimaryValuePath="CountryName"
ShapeColorValuePath="Density"
ShowDataLabels="True"
ShowBubbles="True"
EnableSelection="True"
SelectedShapeFill="Yellow"
SelectedShapeStroke="Red"
SelectedShapeStrokeThickness="2"
ShapeHoverFill="DarkGray"
ShapeHoverStroke="Yellow"
ShapeHoverStrokeThickness="1"
ShowShapeTooltip="True">
<map:MapShapeSublayer.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:MapShapeSublayer.ColorMappings>
<map:MapShapeSublayer.DataLabelSettings>
<map:MapDataLabelSettings DataLabelPath="Density"/>
</map:MapShapeSublayer.DataLabelSettings>
<map:MapShapeSublayer.BubbleSettings>
<map:MapBubbleSettings SizeValuePath="Density" />
</map:MapShapeSublayer.BubbleSettings>
</map:MapShapeSublayer>
</map:MapShapeLayer.Sublayers>
</map:MapShapeLayer>
</map:SfMaps.Layer>
</map:SfMaps>
Methods
OnBindingContextChanged()
Invoked whenever the binding context of the View changes.
Declaration
protected override void OnBindingContextChanged()
Events
ShapeSelected
Called when the map shape is selecting or unselecting.
Declaration
public event EventHandler<ShapeSelectedEventArgs> ShapeSelected
Event Type
Type |
---|
System.EventHandler<ShapeSelectedEventArgs> |
Explicit Interface Implementations
IShapeLayer.ShapeSelected
Declaration
EventHandler<ShapeSelectedEventArgs> IShapeLayer.ShapeSelected { get; }
Returns
Type |
---|
System.EventHandler<ShapeSelectedEventArgs> |