Migrate from Xamarin.Forms SfMaps to .NET MAUI SfMaps

19 Sep 202324 minutes to read

To make the migration from the Xamarin SfMaps to .NET MAUI SfMaps easier, most of the APIs from the Xamarin SfMaps are kept in the.NET MAUI SfMaps. However, some APIs have been renamed to maintain the consistency of API naming in the .NET MAUI SfMaps. Please find the difference in the following topics.

Initialize control

To initialize the control, import the map namespace and initialize the SfMaps as shown in the following code sample.

Xamarin SfMaps .NET MAUI SfMaps
<ContentPage
    . . .
    xmlns:syncfusion="clr-namespace:Syncfusion.SfMaps.XForms;assembly=Syncfusion.SfMaps.XForms">

        <syncfusion:SfMaps/>

</ContentPage>
using Syncfusion.SfMaps.XForms;
...

SfMaps map = new SfMaps();
...
<ContentPage 
xmlns:map="clr-namespace:Syncfusion.Maui.Maps;assembly=Syncfusion.Maui.Maps">

<map:SfMaps />

</ContentPage>
using Syncfusion.Maui.Maps;


SfMaps map = new SfMaps();
...
Xamarin SfMaps .NET MAUI SfMaps

Layers

*Layer

ShapeFileLayer

*MapShapeLayer

NOTE

All the (*) marked APIs are renamed from Xamarin SfMaps to maintain the consistency of API naming in the .NET MAUI SfMaps.

Adding layer

Shape layer

Xamarin SfMaps .NET MAUI SfMaps

BubbleMarkerSettings

*BubbleSettings

DataLabelSettings

DataLabelSettings

EnableSelection

EnableSelection

ItemsSource

*DataSource

ShapeIDPath

*PrimaryValuePath

ShapeIDTableField

*ShapeDataField

Uri

*ShapesSource

Markers

Markers

MarkerTemplate

MarkerTemplate

ShapeSelectionChanged

*ShapeSelected

ColorMappings

in

ShapeSetting

class

ColorMappings

ShapeFill

in

ShapeSetting

class

ShapeFill

ShapeStroke

in

ShapeSetting

class

ShapeStroke

ShapeStrokeThickness

in

ShapeSetting

class

ShapeStrokeThickness

SelectedShapeColor

in

ShapeSetting

class

*SelectedShapeFill

SelectedShapeStroke

in

ShapeSetting

class

SelectedShapeStroke

SelectedShapeStrokeThickness

in

ShapeSetting

class

SelectedShapeStrokeThickness

ShapeColorValuePath

and

ShapeValuePath

in

ShapeSetting

class

ShapeColorValuePath

NOTE

All the (*) marked APIs are renamed from Xamarin SfMaps to maintain the consistency of API naming in the .NET MAUI SfMaps.

The following code example explains how to intialize the layer and customize the layer in Xamarin SfMaps and .NET MAUI SfMaps.

Xamarin SfMaps .NET MAUI SfMaps
<maps:SfMaps>
    <maps:SfMaps.Layers >
        <maps:ShapeFileLayer Uri="world.shp" >
            <maps:ShapeFileLayer.ShapeSettings>
                <maps:ShapeSetting  ShapeFill="#b5dcff"
                                    ShapeStroke="#1585ed">
                </maps:ShapeSetting>
            </maps:ShapeFileLayer.ShapeSettings>
        </maps:ShapeFileLayer>
    </maps:SfMaps.Layers>
</maps:SfMaps>
SfMaps maps = new SfMaps();

    ShapeFileLayer layer = new ShapeFileLayer();
    layer.Uri = "world.shp";           
    
    ShapeSetting shapeSetting = new ShapeSetting(); 
    shapeSetting.ShapeFill = Color.FromRgb(181, 220, 255);
    shapeSetting.ShapeStroke = Color.FromRgb(21, 133, 237);
    layer.ShapeSettings = shapeSetting;

    maps.Layers.Add(layer);
<map:SfMaps>
    <map:SfMaps.Layer>
        <map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                           ShapeStroke="#1585ed"
                           ShapeFill="#b5dcff">
        </map:MapShapeLayer>
    </maps:SfMaps.Layer>
</maps:SfMaps>
public MainPage()
    {
        InitializeComponent();

        MapShapeLayer layer = new MapShapeLayer();
        layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
        layer.ShapeFill = Color.FromRgb(181, 220, 255);
        layer.ShapeStroke = Color.FromRgb(21, 133, 237);

        SfMaps maps = new SfMaps();
        maps.Layer = layer;

        this.Content = maps;
    }

Tile layer

Xamarin SfMaps .NET MAUI SfMaps

LayerType

,

BingMapKey

,

BingMapStyle

, and

RequestTileUri

Can achieve all this using

UrlTemplate

and

GetBingUrl()

GeoCoordinates

*Center

CanCacheTiles

CanCacheTiles

Radius

Radius

DistanceType

DistanceType

LatLngBounds

LatLngBounds

Markers

Markers

MarkerTemplate

MarkerTemplate

Methods

Xamarin SfMaps .NET MAUI SfMaps

DeleteTilesFromCache()

DeleteTilesFromCache()

Events

Xamarin SfMaps .NET MAUI SfMaps

ZoomLevelChanging

ZoomLevelChanging

NOTE

All the (*) marked APIs are renamed from Xamarin SfMaps to maintain the consistency of API naming in the .NET MAUI SfMaps.

The following code example explains how to intialize the tile layer and it’s customization in Xamarin SfMaps and .NET MAUI SfMaps.

Adding OSM layer

Xamarin SfMaps .NET MAUI SfMaps
<maps:SfMaps>
    <maps:SfMaps.Layers>
        <maps:ImageryLayer GeoCoordinates="38.909804, -77.043442"
                           Radius="5"
                           DistanceType="KiloMeter">
            <maps:ImageryLayer.Markers>
                <maps:MapMarker Latitude="38.909804"
                                Longitude="-77.043442" />
            </maps:ImageryLayer.Markers>
        </maps:ImageryLayer>
    </maps:SfMaps.Layers>
SfMaps maps = new SfMaps();
ImageryLayer layer = new ImageryLayer();
layer.GeoCoordinates = new Point(38.909804, -77.043442);
layer.Radius = 5;
layer.DistanceType = DistanceType.KiloMeter;
MapMarker marker = new MapMarker();
marker.Latitude = "38.909804";
marker.Longitude = "-77.043442";
layer.Markers.Add(marker);
maps.Layers.Add(layer);
this.Content = maps;
<maps:SfMaps>
    <maps:SfMaps.Layer>
        <maps:MapTileLayer Radius="5"
                           DistanceType="Kilometer"
                           UrlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png">
            <maps:MapTileLayer.Center>
                <maps:MapLatLng Latitude="38.909804"
                                Longitude="-77.043442">
                </maps:MapLatLng>
            </maps:MapTileLayer.Center>
            <maps:MapTileLayer.ZoomPanBehavior>
                <maps:MapZoomPanBehavior />
            </maps:MapTileLayer.ZoomPanBehavior>
            <maps:MapTileLayer.Markers>
                <maps:MapMarkerCollection>
                    <maps:MapMarker Latitude="38.909804"
                                    Longitude="-77.043442" />
                </maps:MapMarkerCollection>
            </maps:MapTileLayer.Markers>
        </maps:MapTileLayer>
    </maps:SfMaps.Layer>
</maps:SfMaps>
public MainPage()
{
   InitializeComponent();
   SfMaps map = new SfMaps();
   MapTileLayer tileLayer = new MapTileLayer();
   tileLayer.UrlTemplate = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
   tileLayer.Radius = 5;
   tileLayer.DistanceType = MapDistanceType.Kilometer;
   tileLayer.Center = new MapLatLng(38.909804, -77.043442);
   MapZoomPanBehavior zoomPanBehavior = new MapZoomPanBehavior();
   tileLayer.ZoomPanBehavior = zoomPanBehavior;
   MapMarker mapMarker = new MapMarker();
   mapMarker.Latitude = 38.909804;
   mapMarker.Longitude = -77.043442;
   MapMarkerCollection mapMarkers = new MapMarkerCollection();
   mapMarkers.Add(mapMarker);
   tileLayer.Markers = mapMarkers;
   map.Layer = tileLayer;
   this.Content = map;
}

Adding bing maps

Xamarin SfMaps .NET MAUI SfMaps
<maps:SfMaps>
    <maps:SfMaps.Layers>
        <maps:ImageryLayer LayerType="Bing"
                           BingMapKey="Your bing map key" />
    </maps:SfMaps.Layers>
</maps:SfMaps>
SfMaps maps = new SfMaps();
ImageryLayer layer = new ImageryLayer();
layer.LayerType = LayerType.Bing;
layer.BingMapKey = "Your bing map key";
maps.Layers.Add(layer);
this.Content = maps;
  • C#
  • public MainPage()
    {
    	InitializeComponent();
       SfMaps map = new SfMaps();
       MapTileLayer tileLayer = new MapTileLayer();
       this.GenerateBing(tileLayer);
       map.Layer = tileLayer;
       this.Content = map;
    }
    
    private async Task GenerateBing(MapTileLayer tileLayer)
    {
        tileLayer.UrlTemplate = await MapTileLayer.GetBingUrl("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/RoadOnDemand?output=json&uriScheme=https&include=ImageryProviders&key=subscription_key") + "?name=bingName";
    }

    Bubble settings

    Xamarin SfMaps .NET MAUI SfMaps

    ColorMappings

    ColorMappings

    ColorValuePath

    ColorValuePath

    Fill

    Fill

    MaxSize

    MaxSize

    MinSize

    MinSize

    Opacity

    Opacity

    ValuePath

    *SizeValuePath

    ShowBubbles

    ShowBubbles

    in

    MapShapeLayer

    class

    NOTE

    All the (*) marked APIs are renamed from Xamarin SfMaps to maintain the consistency of API naming in the .NET MAUI SfMaps.

    The following code example explains how to customize the bubble in the Xamarin SfMaps and .NET MAUI SfMaps.

    Xamarin SfMaps .NET MAUI SfMaps
    <maps:SfMaps>
        <maps:SfMaps.Layers >
            <maps:ShapeFileLayer Uri="world.shp"
                                 ItemsSource="{Binding Data}"
                                 ShapeIDPath="State"
                                 ShapeIDTableField="name">
                <maps:ShapeFileLayer.BubbleMarkerSettings>
                    <maps:BubbleMarkerSetting ShowBubbles="True"
                                              ColorValuePath="Population"
                                              ValuePath="Population"/>
                </maps:ShapeFileLayer.BubbleMarkerSettings>
            </maps:ShapeFileLayer>
        </maps:SfMaps.Layers>
    </maps:SfMaps>
    ViewModel viewModel = new ViewModel();
        this.BindingContext = viewModel;
        SfMaps maps = new SfMaps();
    
        ShapeFileLayer layer = new ShapeFileLayer();
        layer.Uri = "world.shp";           
        layer.ShapeIDPath="State"
        layer.ShapeIDTableField="name"
        layer.DataSource = viewModel.Data;
    
        BubbleMarkerSetting bubbleSetting = new BubbleMarkerSetting()
        {
            ShowBubbles = true,
            ValuePath = "index",
            ColorValuePath = "Population",
            SizeValuePath = "Population",
        };
    
        layer.BubbleMarkerSettings = bubbleSetting;
    
        maps.Layers.Add(layer);
    <map:SfMaps>
        <map:SfMaps.Layer>
            <map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                               DataSource="{Binding Data}"
                               PrimaryValuePath="State"
                               ShapeDataField="name"
                               ShowBubbles="True"
                               ShowBubbleTooltip="True">
    
                <map:MapShapeLayer.BubbleSettings>
                    <map:MapBubbleSettings ColorValuePath="Population" 
                                           SizeValuePath="Population">
                    </map:MapBubbleSettings>
                </map:MapShapeLayer.BubbleSettings>
            </map:MapShapeLayer>
        </map:SfMaps.Layer>
    </map:SfMaps>
    public MainPage()
    {
       InitializeComponent();
        ViewModel viewModel = new ViewModel();
        this.BindingContext = viewModel;
        SfMaps maps = new SfMaps();
        MapShapeLayer layer = new MapShapeLayer();
        layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
        layer.DataSource = viewModel.Data;
        layer.PrimaryValuePath = "State";
        layer.ShapeDataField = "name";
        layer.ShowBubbles = true;
        layer.ShowBubbleTooltip = true;
    
        MapBubbleSettings bubbleSetting = new MapBubbleSettings()
        {
            ColorValuePath = "Population",
            SizeValuePath = "Population",
        };
    
        layer.BubbleSettings = bubbleSetting;
        maps.Layer = layer;
        this.Content = maps;
    }

    Data label settings

    Xamarin SfMaps .NET MAUI SfMaps

    SmartLabelMode

    *OverflowMode

    TextColor

    ,

    FontSize

    ,

    FontFamily

    , and

    FontAttributes

    *DataLabelStyle

    NOTE

    All the (*) marked APIs are renamed from Xamarin SfMaps to maintain the consistency of API naming in the .NET MAUI SfMaps.

    The following code example explains how to customize the data label in the Xamarin SfMaps and .NET MAUI SfMaps.

    Xamarin SfMaps .NET MAUI SfMaps
    <maps:SfMaps>
        <maps:SfMaps.Layers >
            <maps:ShapeFileLayer Uri="world.shp"
                                 ItemsSource="{Binding Data}"
                                 ShapeIDPath="State"
                                 ShapeIDTableField="name"
                                 ShowMapItems="True">
                <maps:ShapeFileLayer.DataLabelSettings>
                    <maps:DataLabelSetting  SmartLabelMode="Trim" />
                </maps:ShapeFileLayer.DataLabelSettings>
            </maps:ShapeFileLayer>
        </maps:SfMaps.Layers>
    </maps:SfMaps>
    ViewModel viewModel = new ViewModel();
        this.BindingContext = viewModel;
        SfMaps maps = new SfMaps();
    
        ShapeFileLayer layer = new ShapeFileLayer();
        layer.Uri = "world.shp";           
        layer.ShapeIDPath="State"
        layer.ShapeIDTableField="name"
        layer.DataSource = viewModel.Data;
        layer.ShowMapItems = true;
    
        DataLabelSetting dataLabelSetting = new DataLabelSetting();
        dataLabelSetting.SmartLabelMode = IntersectAction.Trim;
        
        layer.DataLabelSettings = dataLabelSetting;
    
        maps.Layers.Add(layer);
    <map:SfMaps>
        <map:SfMaps.Layer>
            <map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                               DataSource="{Binding Data}"
                               PrimaryValuePath="State" 
                               ShapeDataField="name"
                               ShapeHoverFill = "Transparent" 
                               ShapeHoverStroke="Transparent"
                               ShowDataLabels="True">
    
                <map:MapShapeLayer.DataLabelSettings>
                    <map:MapDataLabelSettings OverflowMode="Trim"
                                              DataLabelPath="State">
                            <map:MapDataLabelSettings.DataLabelStyle>
                                    <map:MapLabelStyle FontSize="12"/>
                            </map:MapDataLabelSettings.DataLabelStyle>
                    </map:MapDataLabelSettings>
                </map:MapShapeLayer.DataLabelSettings>
    
            </map:MapShapeLayer>
        </map:SfMaps.Layer>
    </map:SfMaps>
    public MainPage()
    {
       InitializeComponent();
        ViewModel viewModel = new ViewModel();
        this.BindingContext = viewModel;
        SfMaps maps = new SfMaps();
        MapShapeLayer layer = new MapShapeLayer();
        layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
        layer.DataSource = viewModel.Data;
        layer.PrimaryValuePath = "State";
        layer.ShapeDataField = "name";
        layer.ShowDataLabels = true;
    
        layer.DataLabelSettings = new MapDataLabelSettings()
        {
           DataLabelPath = "State",
           OverflowMode = MapLabelOverflowMode.Trim,
           DataLabelStyle = new MapLabelStyle()
           {
               FontSize = 12
           },
        };
    
        maps.Layer = layer;
        this.Content = maps;
    }

    Color mappings

    Xamarin SfMaps .NET MAUI SfMaps

    Color

    Color

    LegendLabel

    *Text

    EqualColorMapping

    EqualColorMapping

    RangeColorMapping

    RangeColorMapping

    Equal color mapping

    Xamarin SfMaps .NET MAUI SfMaps

    Value

    Value

    Range color mapping

    Xamarin SfMaps .NET MAUI SfMaps

    From

    From

    To

    To

    NOTE

    All the (*) marked APIs are renamed from Xamarin SfMaps to maintain the consistency of API naming in the .NET MAUI SfMaps.

    The following code example explains how to customize the shape color in the Xamarin SfMaps and .NET MAUI SfMaps.

    Xamarin SfMaps .NET MAUI SfMaps
    <maps:SfMaps>
        <maps:SfMaps.Layers >
            <maps:ShapeFileLayer Uri="world.shp"
                                 ItemsSource="{Binding Data}"
                                 ShapeIDPath="State"
                                 ShapeIDTableField="name">
                <maps:ShapeFileLayer.ShapeSettings>
                    <maps:ShapeSetting ShapeValuePath="Count" ShapeColorValuePath="Count" >
                        <maps:ShapeSetting.ColorMappings>
                            <maps:EqualColorMapping Color="Blue" Value="100" Text="100"/>
                            <maps:RangeColorMapping Color="Green" From="0" To="99" Text="0-99"/>
                        </maps:ShapeSetting.ColorMappings>
                    </maps:ShapeSetting>
                </maps:ShapeFileLayer.ShapeSettings>
            </maps:ShapeFileLayer>
        </maps:SfMaps.Layers>
    </maps:SfMaps>
    ViewModel viewModel = new ViewModel();
        this.BindingContext = viewModel;
        SfMaps maps = new SfMaps();
    
        ShapeFileLayer layer = new ShapeFileLayer();
        layer.Uri = "world.shp";           
        layer.ShapeIDPath="State"
        layer.ShapeIDTableField="name"
        layer.DataSource = viewModel.Data;
    
        EqualColorMapping colorMapping = new EqualColorMapping();
        colorMapping.Color = Colors.Blue;
        colorMapping.Value = "100";
        colorMapping.Text = "100";
    
        RangeColorMapping colorMapping1 = new RangeColorMapping();
        colorMapping1.Color = Colors.Green;
        colorMapping1.From = 0;
        colorMapping1.To = 99;
        colorMapping1.Text = "0-99";
        
        ShapeSetting shapeSetting = new ShapeSetting();
        shapeSetting.ShapeValuePath = "Count";
        shapeSetting.ShapeColorValuePath = "Count";
        
        shapeSetting.ColorMappings.Add(colorMapping);
        shapeSetting.ColorMappings.Add(colorMapping1);
    
        layer.ShapeSettings = shapeSetting;
    
        maps.Layers.Add(layer);
    <map:SfMaps>
        <map:SfMaps.Layer>
            <map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                               DataSource="{Binding Data}"
                               PrimaryValuePath="State"
                               ShapeDataField="name"
                               ShapeColorValuePath="Count">
                <map:MapShapeLayer.ColorMappings>
                    <map:EqualColorMapping Color="Blue" Value="100" Text="100"/>
                    <map:RangeColorMapping Color="Green" From="0" To="99" Text="0-99"/>
                </map:MapShapeLayer.ColorMappings>
            </map:MapShapeLayer>
        </map:SfMaps.Layer>
    </map:SfMaps>
    public MainPage()
    {
       InitializeComponent();
        ViewModel viewModel = new ViewModel();
        this.BindingContext = viewModel;
        SfMaps maps = new SfMaps();
        MapShapeLayer layer = new MapShapeLayer();
        layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
        layer.DataSource = viewModel.Data;
        layer.PrimaryValuePath = "State";
        layer.ShapeDataField = "name";
        layer.ShapeColorValuePath = "Count";
    
        EqualColorMapping colorMapping = new EqualColorMapping();
        colorMapping.Color = Colors.Blue;
        colorMapping.Value = "100";
        colorMapping.Text = "100";
    
        RangeColorMapping colorMapping1 = new RangeColorMapping();
        colorMapping1.Color = Colors.Green;
        colorMapping1.From = 0;
        colorMapping1.To = 99;
        colorMapping1.Text = "0-99";
    
        layer.ColorMappings.Add(colorMapping);
        layer.ColorMappings.Add(colorMapping1);
    
        maps.Layer = layer;
        this.Content = maps;
    }

    Markers

    Xamarin SfMaps .NET MAUI SfMaps

    Latitude

    Latitude

    Longitude

    Longitude

    IconColor

    in

    MapMarkerSetting

    *IconFill

    IconSize

    in

    MapMarkerSetting

    Divided into

    *IconHeight

    and

    *IconWidth

    MarkerIcon

    in

    MapMarkerSetting

    *IconType

    HorizontalAlignment

    in

    MapMarkerSetting

    HorizontalAlignment

    VerticalAlignment

    in

    MapMarkerSetting

    VerticalAlignment

    NOTE

    All the (*) marked APIs are renamed from Xamarin SfMaps to maintain the consistency of API naming in the .NET MAUI SfMaps.

    The following code example explains how to customize marker in the Xamarin SfMaps and .NET MAUI SfMaps.

    Xamarin SfMaps .NET MAUI SfMaps
    <maps:SfMaps>
        <maps:SfMaps.Layers >
            <maps:ShapeFileLayer Uri="world.shp"
                                 ShowMapItems="True">
                <maps:ShapeFileLayer.Markers>
                    <maps:MapMarker Latitude="20.5595"
                                    Longitude="22.9375"/>
                </maps:ShapeFileLayer.Markers>
                <maps:ShapeFileLayer.MarkerSettings>
                    <maps:MapMarkerSetting IconColor="Red"/>
                </maps:ShapeFileLayer.MarkerSettings>
            </maps:ShapeFileLayer>
        </maps:SfMaps.Layers>
    </maps:SfMaps>
    SfMaps maps = new SfMaps();
    
        ShapeFileLayer layer = new ShapeFileLayer();
        layer.Uri = "world.shp";           
    
        MapMarker mapMarker = new MapMarker();
        mapMarker.Latitude = 20.5595;
        mapMarker.Longitude = 22.9375;
        layer.Markers.Add(marker);
    
        MapMarkerSetting mapMarkerSetting = new MapMarkerSetting();
        mapMarkerSetting.IconColor = Colors.Red;
        layer.MarkerSettings = mapMarkerSetting;
    
        maps.Layers.Add(layer);
    <map:SfMaps>
        <map:SfMaps.Layer>
            <map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
                <map:MapShapeLayer.Markers>
                    <map:MapMarkerCollection>
                        <map:MapMarker Latitude="20.5595"
                                       Longitude="22.9375"
                                       IconFill="Red"/>
                    </map:MapMarkerCollection>
                </map:MapShapeLayer.Markers>
            </map:MapShapeLayer>
        </map:SfMaps.Layer>
    </map:SfMaps>
    public MainPage()
    {
       InitializeComponent();
        SfMaps maps = new SfMaps();
        MapShapeLayer layer = new MapShapeLayer();
        layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
    
        MapMarker mapMarker = new MapMarker();
        mapMarker.Latitude = 20.5595;
        mapMarker.Longitude = 22.9375;
        mapMarker.IconFill = Colors.Red;
    
        maps.Layer = layer;
        this.Content = maps;
    }

    Legend

    Xamarin SfMaps .NET MAUI SfMaps

    LegendType

    in

    MapLegendSetting

    *SourceType

    TextColor

    ,

    FontSize

    ,

    FontFamily

    , and

    FontAttributes

    in

    MapLegendSetting

    *TextStyle

    IconSize

    in

    MapLegendSetting

    IconSize

    LegendIcon

    in

    MapLegendSetting

    *IconType

    NOTE

    All the (*) marked APIs are renamed from Xamarin SfMaps to maintain the consistency of API naming in the .NET MAUI SfMaps.

    The following code example explains how to customize legend in the Xamarin SfMaps and .NET MAUI SfMaps.

    Xamarin SfMaps .NET MAUI SfMaps
    <maps:SfMaps>
        <maps:SfMaps.Layers >
            <maps:ShapeFileLayer Uri="world.shp"
                                 ItemsSource="{Binding Data}"
                                 ShapeIDPath="State"
                                 ShapeIDTableField="name">
                <maps:ShapeFileLayer.ShapeSettings>
                    <maps:ShapeSetting ShapeValuePath="Count" ShapeColorValuePath="Count" >
                        <maps:ShapeSetting.ColorMappings>
                            <map:EqualColorMapping Color="Blue" Value="100" Text="100"/>
                        </maps:ShapeSetting.ColorMappings>
                    </maps:ShapeSetting>
                </maps:ShapeFileLayer.ShapeSettings>
                <maps:ShapeFileLayer.LegendSettings>
                            <maps:MapLegendSetting ShowLegend="True" LegendType="Layers">
                            </maps:MapLegendSetting>
                        </maps:ShapeFileLayer.LegendSettings>
            </maps:ShapeFileLayer>
        </maps:SfMaps.Layers>
    </maps:SfMaps>
    ViewModel viewModel = new ViewModel();
        this.BindingContext = viewModel;
        SfMaps maps = new SfMaps();
    
        ShapeFileLayer layer = new ShapeFileLayer();
        layer.Uri = "world.shp";           
        layer.ShapeIDPath="State"
        layer.ShapeIDTableField="name"
        layer.DataSource = viewModel.Data;
    
        EqualColorMapping colorMapping = new EqualColorMapping();
        colorMapping.Color = Colors.Blue;
        colorMapping.Value = "100";
        colorMapping.Text = "100";
        
        ShapeSetting shapeSetting = new ShapeSetting();
        shapeSetting.ShapeValuePath = "Count";
        shapeSetting.ShapeColorValuePath = "Count";
    
        MapLegendSetting legendSetting = new MapLegendSetting();
        legendSetting.ShowLegend = true;
        legendSetting.LegendType = LegendType.Layers;
        layer.LegendSettings = legendSetting;
    
        shapeSetting.ColorMappings.Add(colorMapping);
    
        layer.ShapeSettings = shapeSetting;
    
        maps.Layers.Add(layer);
    <map:SfMaps>
        <map:SfMaps.Layer>
            <map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                               DataSource="{Binding Data}"
                               PrimaryValuePath="State"
                               ShapeDataField="name"
                               ShapeColorValuePath="Count">
                <map:MapShapeLayer.ColorMappings>
                    <map:EqualColorMapping Color="Blue" Value="100" Text="100"/>
                </map:MapShapeLayer.ColorMappings>
                <map:MapShapeLayer.Legend>
                    <map:MapLegend SourceType="Shape"
                                   Placement="Top"
                                   IconSize="20, 20"
                                   IconType="Diamond">
                        <map:MapLegend.TextStyle>
                            <map:MapLabelStyle FontSize="16"/>
                        </map:MapLegend.TextStyle>
                    </map:MapLegend>
                </map:MapShapeLayer.Legend>
            </map:MapShapeLayer>
        </map:SfMaps.Layer>
    </map:SfMaps>
    public MainPage()
    {
       InitializeComponent();
        ViewModel viewModel = new ViewModel();
        this.BindingContext = viewModel;
        SfMaps maps = new SfMaps();
        MapShapeLayer layer = new MapShapeLayer();
        layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
        layer.DataSource = viewModel.Data;
        layer.PrimaryValuePath = "State";
        layer.ShapeDataField = "name";
        layer.ShapeColorValuePath = "Count";
    
        EqualColorMapping colorMapping = new EqualColorMapping();
        colorMapping.Color = Colors.Blue;
        colorMapping.Value = "100";
        colorMapping.Text = "100";
    
        layer.ColorMappings.Add(colorMapping);
    
        MapLegend legendSet = new MapLegend();
        legendSet.SourceType = LegendSourceType.Shape;
        legendSet.Placement = Syncfusion.Maui.Core.LegendPlacement.Top;
        legendSet.IconSize = new Size(20, 20);
        legendSet.IconType = Syncfusion.Maui.Core.ShapeType.Diamond;
        MapLabelStyle mapLabelStyle = new MapLabelStyle();
        mapLabelStyle.FontSize = 16;
            
        legendSet.TextStyle = mapLabelStyle;
        layer.Legend = legendSet;
    
        maps.Layer = layer;
        this.Content = maps;
    }

    Tooltip

    Xamarin SfMaps .NET MAUI SfMaps

    TooltipSetting

    *MapTooltipSettings

    ShowTooltip

    in

    TooltipSetting

    Divided into

    *ShowShapeTooltip

    ,

    *ShowBubbleTooltip

    and

    *ShowMarkerTooltip

    TooltipSetting

    in

    ShapeFileLayer

    *ShapeTooltipSettings

    TooltipSetting

    in

    BubbleMarkerSetting

    *BubbleTooltipSettings

    TooltipSetting

    in

    MapMarkerSetting

    *MarkerTooltipSettings

    Tooltip settings

    Xamarin SfMaps .NET MAUI SfMaps

    BackgroundColor

    *Background

    Margin

    *Padding

    TextColor

    ,

    FontSize

    ,

    FontFamily

    and

    FontAttributes

    *TextStyle

    NOTE

    All the (*) marked APIs are renamed from Xamarin SfMaps to maintain the consistency of API naming in the .NET MAUI SfMaps.

    The following code example explains how to customize tooltip in the Xamarin SfMaps and .NET MAUI SfMaps.

    Xamarin SfMaps .NET MAUI SfMaps
    <maps:SfMaps>
        <maps:SfMaps.Layers >
            <maps:ShapeFileLayer Uri="world.shp"
                                 ItemsSource="{Binding Data}"
                                 ShapeIDPath="State"
                                 ShapeIDTableField="name">
                <maps:ShapeFileLayer.TooltipSettings>
                    <maps:TooltipSetting  ShowTooltip="True"
                                          ValuePath="Count"/>
        </maps:ShapeFileLayer.TooltipSettings>
            </maps:ShapeFileLayer>
        </maps:SfMaps.Layers>
    </maps:SfMaps>
    ViewModel viewModel = new ViewModel();
        this.BindingContext = viewModel;
        SfMaps maps = new SfMaps();
    
        ShapeFileLayer layer = new ShapeFileLayer();
        layer.Uri = "world.shp";           
        layer.ShapeIDPath="State"
        layer.ShapeIDTableField="name"
        layer.DataSource = viewModel.Data;
    
        shapeFileLayer.TooltipSettings.ShowTooltip = true;
        shapeFileLayer.TooltipSettings.ValuePath = "Count";
    
        layer.ShapeSettings = shapeSetting;
    
        maps.Layers.Add(layer);
    <map:SfMaps>
        <map:SfMaps.Layer>
            <map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                               DataSource="{Binding Data}"
                               PrimaryValuePath="State"
                               ShapeDataField="name"
                               ShapeColorValuePath="Count"
                               ShowShapeToolTip="True">
    
                      <map:MapShapeLayer.ShapeTooltipSettings>
                        <map:MapTooltipSettings Background="#002080"
                                                Padding="2">
                            <map:MapTooltipSettings.TextStyle>
                                <map:MapLabelStyle FontSize="14"
                                                   TextColor="White"
                                                   FontAttributes="Bold">
                                </map:MapLabelStyle>
                            </map:MapTooltipSettings.TextStyle>
                        </map:MapTooltipSettings>
                    </map:MapShapeLayer.ShapeTooltipSettings>
            </map:MapShapeLayer>
        </map:SfMaps.Layer>
    </map:SfMaps>
    public ToolTip()
        {
            InitializeComponent();
    
            ViewModel viewModel = new ViewModel();
            this.BindingContext = viewModel;  
    
            MapShapeLayer layer = new MapShapeLayer();
            layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
            layer.PrimaryValuePath = "Continent";
            layer.ShapeDataField = "continent";
            layer.DataSource = viewModel.Data;
            layer.ShowShapeTooltip = true;
    
            layer.ShapeTooltipSettings = new MapTooltipSettings()
            {
                Background = Color.FromArgb("#002080"),
                Padding = new Thickness(2),
                TextStyle = new MapLabelStyle()
                {
                    FontSize = 14,
                    TextColor = Colors.White,
                    FontAttributes = FontAttributes.Bold
                }
            };
    
            SfMaps maps = new SfMaps();
            maps.Layer = layer;
            this.Content = maps;
        }

    Shape sublayer

    Xamarin SfMaps .NET MAUI SfMaps

    BubbleMarkerSettings

    *BubbleSettings

    DataLabelSettings

    DataLabelSettings

    ItemsSource

    *DataSource

    ShapeIDPath

    *PrimaryValuePath

    ShapeIDTableField

    *ShapeDataField

    Uri

    *ShapesSource

    ColorMappings

    in

    ShapeSetting

    class

    ColorMappings

    ShapeFill

    in

    ShapeSetting

    class

    ShapeFill

    ShapeStroke

    in

    ShapeSetting

    class

    ShapeStroke

    ShapeStrokeThickness

    in

    ShapeSetting

    class

    ShapeStrokeThickness

    ShapeColorValuePath

    and

    ShapeValuePath

    in

    ShapeSetting

    class

    ShapeColorValuePath

    NOTE

    All the (*) marked APIs are renamed from Xamarin SfMaps to maintain the consistency of API naming in the .NET MAUI SfMaps.

    The following code example explains how to initialize the shape sublayer and it’s customization in the Xamarin SfMaps and .NET MAUI SfMaps.

    Xamarin SfMaps .NET MAUI SfMaps
    <maps:SfMaps>
        <maps:SfMaps.Layers>
            <maps:ShapeFileLayer Uri="world1.shp">
                <maps:ShapeFileLayer.Sublayers>
                    <maps:ShapeFileLayer Uri="usa_state.shp">
                        <maps:ShapeFileLayer.ShapeSettings>
                            <maps:ShapeSetting  ShapeFill="#8DCCF4"
                                                ShapeStroke="#B1D8F5"
                                                ShapeStrokeThickness="1">
                            </maps:ShapeSetting>
                        </maps:ShapeFileLayer.ShapeSettings>
                    </maps:ShapeFileLayer>
                </maps:ShapeFileLayer.Sublayers>
            </maps:ShapeFileLayer>
        </maps:SfMaps.Layers>
    </maps:SfMaps>
    SfMaps map = new SfMaps();
    map.BackgroundColor = Color.White;
    ShapeFileLayer layer = new ShapeFileLayer();
    layer.Uri = "world1.shp";
    ShapeFileLayer subShapeLayer = new ShapeFileLayer();
    subShapeLayer.Uri = "usa_state.shp";
    ShapeSetting shapeSetting = new ShapeSetting();
    shapeSetting.ShapeFill = Color.FromRgb(181, 220, 255);
    shapeSetting.ShapeStroke = Color.FromRgb(21, 133, 237);
    subShapeLayer.ShapeSettings = shapeSetting;
    layer.Sublayers.Add(subShapeLayer);
    map.Layers.Add(layer);
    this.Content = map;
    <map:SfMaps>
        <map:SfMaps.Layer>
            <map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
                <map:MapShapeLayer.Sublayers>
                    <map:MapShapeSublayer ShapeStroke="#B1D8F5"
                                          ShapeFill="#8DCCF4"
                                          ShapeStrokeThickness = "1"
                                          ShapesSource="https://cdn.syncfusion.com/maps/map-data/africa.json">
                    </map:MapShapeSublayer>
                </map:MapShapeLayer.Sublayers>
            </map:MapShapeLayer>
        </map:SfMaps.Layer>
    </map:SfMaps>
    public MainPage()
    {
        InitializeComponent();
        SfMaps maps = new SfMaps();
        MapShapeLayer layer = new MapShapeLayer();
        layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
        MapShapeSublayer sublayer = new MapShapeSublayer();
        sublayer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/africa.json"));
        sublayer.ShapeFill = Color.FromRgb(81, 220, 255);
        sublayer.ShapeStroke = Color.FromRgb(21, 133, 237);
        sublayer.ShapeStrokeThickness = 1;
        layer.Sublayers.Add(sublayer);
        maps.Layer = layer;
        this.Content = maps;
    }

    Bubble settings

    Xamarin SfMaps .NET MAUI SfMaps

    ColorMappings

    ColorMappings

    ColorValuePath

    ColorValuePath

    Fill

    Fill

    MaxSize

    MaxSize

    MinSize

    MinSize

    Opacity

    Opacity

    ValuePath

    *SizeValuePath

    ShowBubbles

    ShowBubbles

    NOTE

    All the (*) marked APIs are renamed from Xamarin SfMaps to maintain the consistency of API naming in the .NET MAUI SfMaps.

    The following code example explains how to customize the bubble in the Xamarin SfMaps and .NET MAUI SfMaps.

    Xamarin SfMaps .NET MAUI SfMaps
    <maps:SfMaps>
        <maps:SfMaps.Layers>
            <maps:ShapeFileLayer Uri="world1.shp">
                <maps:ShapeFileLayer.Sublayers>
                    <maps:ShapeFileLayer Uri="usa_state.shp"
                                         ItemsSource="{Binding DataSource}"
                                         ShapeIDPath="Name"
                                         ShapeIDTableField="STATE_NAME">
                        <maps:ShapeFileLayer.BubbleMarkerSettings>
                            <maps:BubbleMarkerSetting ShowBubbles="True"
                                                      ValuePath="index"
                                                      Fill="Orange"
                                                      Opacity="0.8" />
                        </maps:ShapeFileLayer.BubbleMarkerSettings>
                    </maps:ShapeFileLayer>
                </maps:ShapeFileLayer.Sublayers>
            </maps:ShapeFileLayer>
        </maps:SfMaps.Layers>
    </maps:SfMaps>
    ViewModel viewModel = new ViewModel();
    this.BindingContext = viewModel;
    SfMaps maps = new SfMaps();
    ShapeFileLayer layer = new ShapeFileLayer();
    layer.Uri = "world1.shp";
    ShapeFileLayer subShapeLayer = new ShapeFileLayer();
    subShapeLayer.Uri = "usa_state.shp";
    subShapeLayer.ShapeIDTableField = "STATE_NAME";
    subShapeLayer.ShapeIDPath = "Name";
    subShapeLayer.ItemsSource = viewModel.DataSource;
    
    BubbleMarkerSetting bubbleSetting = new BubbleMarkerSetting()
    {
        ShowBubbles = true,
        ValuePath = "index",
        Fill = Color.Orange,
        Opacity = 0.8
    };
    
    subShapeLayer.BubbleMarkerSettings = bubbleSetting;
    layer.Sublayers.Add(subShapeLayer);
    maps.Layers.Add(layer);
    this.Content = maps;
    <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/africa.json"
                                          ShapeDataField="name"
                                          DataSource="{Binding Data}"
                                          PrimaryValuePath="State"
                                          ShowBubbles="True">
                        <map:MapShapeSublayer.BubbleSettings>
                            <map:MapBubbleSettings ColorValuePath="Size"
                                                   SizeValuePath="Size">
                            </map:MapBubbleSettings>
                        </map:MapShapeSublayer.BubbleSettings>
                    </map:MapShapeSublayer>
                </map:MapShapeLayer.Sublayers>
            </map:MapShapeLayer>
        </map:SfMaps.Layer>
    </map:SfMaps>
    public MainPage()
    {
        InitializeComponent();
        ViewModel viewModel = new ViewModel();
        this.BindingContext = viewModel;
        SfMaps maps = new SfMaps();
        MapShapeLayer layer = new MapShapeLayer();
        layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
        MapShapeSublayer sublayer = new MapShapeSublayer();
        sublayer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/africa.json"));
        sublayer.DataSource = viewModel.Data;
        sublayer.PrimaryValuePath = "State";
        sublayer.ShapeDataField = "name";
        sublayer.ShowBubbles = true;
    
        MapBubbleSettings bubbleSetting = new MapBubbleSettings()
        {
            ColorValuePath = "Size",
            SizeValuePath = "Size",
        };
    
        sublayer.BubbleSettings = bubbleSetting;
        layer.Sublayers.Add(sublayer);
        maps.Layer = layer;
        this.Content = maps;
    }

    Data label settings

    Xamarin SfMaps .NET MAUI SfMaps

    SmartLabelMode

    *OverflowMode

    TextColor

    ,

    FontSize

    ,

    FontFamily

    , and

    FontAttributes

    *DataLabelStyle

    NOTE

    All the (*) marked APIs are renamed from Xamarin SfMaps to maintain the consistency of API naming in the .NET MAUI SfMaps.

    The following code example explains how to customize the data label in the Xamarin SfMaps and .NET MAUI SfMaps.

    Xamarin SfMaps .NET MAUI SfMaps
    <maps:SfMaps>
        <maps:SfMaps.Layers>
            <maps:ShapeFileLayer Uri="world1.shp">
                <maps:ShapeFileLayer.Sublayers>
                    <maps:ShapeFileLayer Uri="usa_state.shp"
                                         ItemsSource="{Binding DataSource}"
                                         ShapeIDPath="Name"
                                         ShapeIDTableField="STATE_NAME"
                                         ShowMapItems="True">
                        <maps:ShapeFileLayer.ShapeSettings>
                            <maps:ShapeSetting ShapeValuePath="Name" />
                        </maps:ShapeFileLayer.ShapeSettings>
                        <maps:ShapeFileLayer.DataLabelSettings>
                            <maps:DataLabelSetting  TextColor="Blue"
                                                    SmartLabelMode="None" />
                        </maps:ShapeFileLayer.DataLabelSettings>
                    </maps:ShapeFileLayer>
                </maps:ShapeFileLayer.Sublayers>
            </maps:ShapeFileLayer>
        </maps:SfMaps.Layers>
    </maps:SfMaps>
    ViewModel viewModel = new ViewModel();
    this.BindingContext = viewModel;
    SfMaps maps = new SfMaps();
    
    ShapeFileLayer layer = new ShapeFileLayer();
    layer.Uri = "world1.shp";
    
    ShapeFileLayer subShapeLayer = new ShapeFileLayer();
    subShapeLayer.Uri = "usa_state.shp";
    subShapeLayer.ShapeIDTableField = "STATE_NAME";
    subShapeLayer.ShapeIDPath = "Name";
    subShapeLayer.ItemsSource = viewModel.DataSource;
    subShapeLayer.ShapeSettings.ShapeValuePath = "Name";
    
    DataLabelSetting dataLabelSetting = new DataLabelSetting();
    dataLabelSetting.SmartLabelMode = IntersectAction.None;
     dataLabelSetting.TextColor = Color.Blue;
    subShapeLayer.DataLabelSettings = dataLabelSetting;
    
    layer.Sublayers.Add(subShapeLayer);
    maps.Layers.Add(layer);
    this.Content = maps;
    <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/africa.json"
                                          ShapeDataField="name"
                                          DataSource="{Binding Data}"
                                          PrimaryValuePath="State"
                                          ShowDataLabels="True">
                        <map:MapShapeSublayer.DataLabelSettings>
                            <map:MapDataLabelSettings DataLabelPath="State" >
                            <map:MapDataLabelSettings.DataLabelStyle>
                                    <map:MapLabelStyle FontSize="6" />
                                </map:MapDataLabelSettings.DataLabelStyle>
                                </map:MapDataLabelSettings>
                        </map:MapShapeSublayer.DataLabelSettings>
                    </map:MapShapeSublayer>
                </map:MapShapeLayer.Sublayers>
            </map:MapShapeLayer>
        </map:SfMaps.Layer>
    </map:SfMaps>
    public MainPage()
    {
    	 InitializeComponent();
        ViewModel viewModel = new ViewModel();
        this.BindingContext = viewModel;
        SfMaps maps = new SfMaps();
        MapShapeLayer layer = new MapShapeLayer();
        layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
        MapShapeSublayer sublayer = new MapShapeSublayer();
        sublayer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/africa.json"));
        sublayer.DataSource = viewModel.Data;
        sublayer.PrimaryValuePath = "State";
        sublayer.ShapeDataField = "name";
        sublayer.ShowDataLabels = true;
    
        sublayer.DataLabelSettings = new MapDataLabelSettings()
        {
            DataLabelPath = "State",
            DataLabelStyle = new MapLabelStyle()
            {
                FontSize = 6,
            },
        };
    
        layer.Sublayers.Add(sublayer);
        maps.Layer = layer;
        this.Content = maps;
    }

    Color mappings

    Xamarin SfMaps .NET MAUI SfMaps

    Color

    Color

    EqualColorMapping

    EqualColorMapping

    RangeColorMapping

    RangeColorMapping

    Equal color mapping

    Xamarin SfMaps .NET MAUI SfMaps

    Value

    Value

    Range color mapping

    Xamarin SfMaps .NET MAUI SfMaps

    From

    From

    To

    To

    The following code example explains how to customize the shape color in the Xamarin SfMaps and .NET MAUI SfMaps.

    Xamarin SfMaps .NET MAUI SfMaps
    <maps:SfMaps>
        <maps:SfMaps.Layers>
            <maps:ShapeFileLayer Uri="world1.shp">
                <maps:ShapeFileLayer.Sublayers>
                    <maps:ShapeFileLayer Uri="usa_state.shp"
                                         ItemsSource="{Binding DataSource}"
                                         ShapeIDPath="Name"
                                         ShapeIDTableField="STATE_NAME">
                        <maps:ShapeFileLayer.ShapeSettings>
                            <maps:ShapeSetting ShapeValuePath="index"
                                               ShapeColorValuePath="index">
                                <maps:ShapeSetting.ColorMappings>
                                    <maps:EqualColorMapping Color="Blue"
                                                            Value="100"
                                                            LegendLabel="100" />
                                    <maps:RangeColorMapping Color="Green"
                                                            From="0"
                                                            To="99"
                                                            LegendLabel="100" />
                                </maps:ShapeSetting.ColorMappings>
                            </maps:ShapeSetting>
                        </maps:ShapeFileLayer.ShapeSettings>
                    </maps:ShapeFileLayer>
                </maps:ShapeFileLayer.Sublayers>
            </maps:ShapeFileLayer>
        </maps:SfMaps.Layers>
    </maps:SfMaps>
    ViewModel viewModel = new ViewModel();
        this.BindingContext = viewModel;
        SfMaps maps = new SfMaps();
    
        ShapeFileLayer layer = new ShapeFileLayer();
        layer.Uri = "world1.shp";
    
        ShapeFileLayer subShapeLayer = new ShapeFileLayer();
        subShapeLayer.Uri = "usa_state.shp";           
        subShapeLayer.ShapeIDPath="Name"
        subShapeLayer.ShapeIDTableField="STATE_NAME"
        subShapeLayer.DataSource = viewModel.DataSource;
    
        EqualColorMapping colorMapping = new EqualColorMapping();
        colorMapping.Color = Colors.Blue;
        colorMapping.Value = "100";
        colorMapping.LegendLabel = "100";
    
        RangeColorMapping colorMapping1 = new RangeColorMapping();
        colorMapping1.Color = Colors.Green;
        colorMapping1.From = 0;
        colorMapping1.To = 99;
        colorMapping1.LegendLabel = "0-99";
        
        ShapeSetting shapeSetting = new ShapeSetting();
        shapeSetting.ShapeValuePath = "Count";
        shapeSetting.ShapeColorValuePath = "Count";
        
        shapeSetting.ColorMappings.Add(colorMapping);
        shapeSetting.ColorMappings.Add(colorMapping1);
    
        subShapeLayer.ShapeSettings = shapeSetting;
        layer.Sublayers.Add(subShapeLayer);
        maps.Layers.Add(layer);
        this.Content = maps;
    <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/africa.json"
                                       DataSource="{Binding Data}"
                                       PrimaryValuePath="State"
                                       ShapeDataField="name"
                                       ShapeColorValuePath="Count">
                        <map:MapShapeSublayer.ColorMappings>
                            <map:EqualColorMapping Color="Blue"
                                                   Value="100"
                                                   Text="100" />
                            <map:RangeColorMapping Color="Green"
                                                   From="0"
                                                   To="99"
                                                   Text="0-99" />
                        </map:MapShapeSublayer.ColorMappings>
                    </map:MapShapeSublayer>
                </map:MapShapeLayer.Sublayers>
            </map:MapShapeLayer>
        </map:SfMaps.Layer>
    </map:SfMaps>
    public MainPage()
    {
       InitializeComponent();
        ViewModel viewModel = new ViewModel();
        this.BindingContext = viewModel;
        SfMaps maps = new SfMaps();
        MapShapeLayer layer = new MapShapeLayer();
        layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
        MapShapeSublayer sublayer = new MapShapeSublayer();
        sublayer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/africa.json"));
        sublayer.DataSource = viewModel.Data;
        sublayer.PrimaryValuePath = "State";
        sublayer.ShapeDataField = "name";
        sublayer.ShapeColorValuePath = "Count";
    
        EqualColorMapping colorMapping = new EqualColorMapping();
        colorMapping.Color = Colors.Blue;
        colorMapping.Value = "100";
        colorMapping.Text = "100";
    
        RangeColorMapping colorMapping1 = new RangeColorMapping();
        colorMapping1.Color = Colors.Green;
        colorMapping1.From = 0;
        colorMapping1.To = 99;
        colorMapping1.Text = "0-99";
    
        sublayer.ColorMappings.Add(colorMapping);
        sublayer.ColorMappings.Add(colorMapping1);
    
        layer.Sublayers.Add(sublayer);
        maps.Layer = layer;
        this.Content = maps;
    }

    Vector layer

    Polygon Layer

    Xamarin SfMaps .NET MAUI SfMaps

    ShapeType

    *MapPolygon

    Points

    Points

    ShapeFill

    in

    ShapeSetting

    class

    *Fill

    ShapeStroke

    in

    ShapeSetting

    class

    *Stroke

    ShapeStrokeThickness

    in

    ShapeSetting

    class

    *StrokeThickness

    NOTE

    All the (*) marked APIs are renamed from Xamarin SfMaps to maintain the consistency of API naming in the .NET MAUI SfMaps.

    The following code example explains how to intialize the polygon layer and it’s customization in Xamarin SfMaps and .NET MAUI SfMaps.

    Xamarin SfMaps .NET MAUI SfMaps
    <maps:SfMaps>
        <maps:SfMaps.Layers>
            <maps:ShapeFileLayer Uri="world1.shp">
                <maps:ShapeFileLayer.Sublayers>
                    <maps:ShapeFileLayer ShapeType="Polygon">
                        <maps:ShapeFileLayer.Points>
                            <Point>
                                <Point.X>39.6737</Point.X>
                                <Point.Y>-100.5</Point.Y>
                            </Point>
                            <Point>
                                <Point.X>61.35</Point.X>
                                <Point.Y>18.131</Point.Y>
                            </Point>
                            <Point>
                                <Point.X>-32.259</Point.X>
                                <Point.Y>145.4214</Point.Y>
                            </Point>
                        </maps:ShapeFileLayer.Points>
                        <maps:ShapeFileLayer.ShapeSettings>
                            <maps:ShapeSetting  ShapeStrokeThickness="3" ShapeFill="Blue" />
                        </maps:ShapeFileLayer.ShapeSettings>
                    </maps:ShapeFileLayer>
                </maps:ShapeFileLayer.Sublayers>
            </maps:ShapeFileLayer>
        </maps:SfMaps.Layers>
    </maps:SfMaps>
    SfMaps maps = new SfMaps();
    
        ShapeFileLayer layer = new ShapeFileLayer();
        layer.Uri = "world.shp"; 
    
        ShapeFileLayer subLayer = new ShapeFileLayer();
        subLayer.ShapeType = ShapeType.Polygon;
        subLayer.Points.Add(new Point(39.6737,-100.5));
        subLayer.Points.Add(new Point(61.35, 18.131));
        subLayer.Points.Add(new Point(-32.259, 145.4214));
        
        ShapeSetting subLayerSetting = new ShapeSetting();
        subLayerSetting.ShapeStrokeThickness = 4;
        subLayerSetting.ShapeFill = Color.Blue;
        subLayerSetting.ShapeStroke = Color.DarkBlue;
    
        subLayer.ShapeSettings = subLayerSetting;
        layer.Sublayers.Add(subLayer);
        maps.Layers.Add(layer);
    <map:SfMaps>
        <map:SfMaps.Layer>
            <map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
                <map:MapShapeLayer.Sublayers>
                    <map:MapPolygonLayer>
                        <map:MapPolygonLayer.Polygons>
                            <map:MapPolygon Stroke="DarkBule" Fill="blue" StrokeThickness="4">
                                <map:MapPolygon.Points>
                                    <map:MapLatLng Latitude="37.6173"
                                                   Longitude="55.7558" />
                                    <map:MapLatLng Latitude="87.1216"
                                                   Longitude="53.7596" />
                                    <map:MapLatLng Latitude="105.3188"
                                                   Longitude="61.5240" />
                                </map:MapPolygon.Points>
                            </map:MapPolygon>
                        </map:MapPolygonLayer.Polygons>
                    </map:MapPolygonLayer>
                </map:MapShapeLayer.Sublayers>
            </map:MapShapeLayer>
        </map:SfMaps.Layer>
    </map:SfMaps>
    public MainPage()
    {
        InitializeComponent();
        SfMaps maps = new SfMaps();
        MapShapeLayer layer = new MapShapeLayer();
        layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
        MapPolygonLayer mapPolygonLayer = new MapPolygonLayer();
        MapPolygon polygon1 = new MapPolygon();
        polygon1.Points = new ObservableCollection<MapLatLng>()
        {
        new MapLatLng(37.6173, 55.7558),
        new MapLatLng(87.1216, 53.7596),
        new MapLatLng(105.3188, 61.5240)
        };
        polygon1.Fill = Colors.Blue;
        polygon1.Stroke = Colors.DarkBlue;
        polygon1.StrokeThickness = 4;
        mapPolygonLayer.Polygons.Add(polygon1);
        layer.Sublayers.Add(mapPolygonLayer);
        maps.Layer = layer;
        this.Content = maps;
    }

    Polyline Layer

    Xamarin SfMaps .NET MAUI SfMaps

    ShapeType

    *MapPolyline

    Points

    Points

    ShapeStroke

    in

    ShapeSetting

    class

    *Stroke

    ShapeStrokeThickness

    in

    ShapeSetting

    class

    *StrokeThickness

    -

    StrokeDashArray

    -

    AnimationEasing

    in

    MapPolylineLayer

    class

    -

    AnimationDuration

    in

    MapPolylineLayer

    class

    NOTE

    All the (*) marked APIs are renamed from Xamarin SfMaps to maintain the consistency of API naming in the .NET MAUI SfMaps.

    The following code example explains how to intialize the polyline layer and it’s customization in Xamarin SfMaps and .NET MAUI SfMaps.

    Xamarin SfMaps .NET MAUI SfMaps
    <maps:SfMaps>
         <maps:SfMaps.Layers>
             <maps:ShapeFileLayer Uri="world1.shp">
                 <maps:ShapeFileLayer.Sublayers>
                     <maps:ShapeFileLayer ShapeType="Polyline">
                         <maps:ShapeFileLayer.Points>
                             <Point>
                                 <Point.X>39.6737</Point.X>
                                 <Point.Y>-100.5</Point.Y>
                             </Point>
                             <Point>
                                 <Point.X>61.35</Point.X>
                                 <Point.Y>18.131</Point.Y>
                             </Point>
                             <Point>
                                 <Point.X>-32.259</Point.X>
                                 <Point.Y>145.4214</Point.Y>
                             </Point>
                         </maps:ShapeFileLayer.Points>
                         <maps:ShapeFileLayer.ShapeSettings>
                             <maps:ShapeSetting  ShapeStrokeThickness="3" />
                         </maps:ShapeFileLayer.ShapeSettings>
                     </maps:ShapeFileLayer>
                 </maps:ShapeFileLayer.Sublayers>
             </maps:ShapeFileLayer>
         </maps:SfMaps.Layers>
     </maps:SfMaps>
    SfMaps maps = new SfMaps();
    
        ShapeFileLayer layer = new ShapeFileLayer();
        layer.Uri = "world.shp"; 
    
        ShapeFileLayer subLayer = new ShapeFileLayer();
        subLayer.Points.Add(new Point(39.6737,-100.5));
        subLayer.Points.Add(new Point(61.35, 18.131));
        subLayer.Points.Add(new Point(-32.259, 145.4214));
        subLayer.ShapeType = ShapeType.Polyline;
                  
        ShapeSetting subLayerSetting = new ShapeSetting();
        subLayerSetting.ShapeStrokeThickness = 3;
        subLayerSetting.ShapeStroke = Color.Blue;
        subLayer.ShapeSettings = subLayerSetting;
        layer.Sublayers.Add(subLayer);
        maps.Layers.Add(layer);
    <map:SfMaps>
         <map:SfMaps.Layer>
             <map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/india.json">
                 <map:MapShapeLayer.Sublayers>
                     <map:MapPolylineLayer AnimationDuration="3000"
                                           AnimationEasing="{x:Static Easing.Linear}">
                         <map:MapPolylineLayer.Polylines>
                             <map:MapPolyline StrokeThickness="3" Stroke="Blue">
                                 <map:MapPolyline.Points>
                                     <map:MapLatLng Latitude="80.2707"
                                                    Longitude="13.0827" />
                                     <map:MapLatLng Latitude="79.6117"
                                                    Longitude="13.1746" />
                                     <map:MapLatLng Latitude="79.5037"
                                                    Longitude="13.6373" />
                                     <map:MapLatLng Latitude="78.8242"
                                                    Longitude="14.4673" />
                                 </map:MapPolyline.Points>
                             </map:MapPolyline>
                         </map:MapPolylineLayer.Polylines>
                     </map:MapPolylineLayer>
                 </map:MapShapeLayer.Sublayers>
             </map:MapShapeLayer>
         </map:SfMaps.Layer>
     </map:SfMaps>
    public MainPage()
     {
         InitializeComponent();
         SfMaps maps = new SfMaps();
         MapShapeLayer layer = new MapShapeLayer();
         layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/india.json"));
         MapPolylineLayer mapPolylineLayer = new MapPolylineLayer();
         mapPolylineLayer.AnimationDuration = 3000;
         mapPolylineLayer.AnimationEasing = Easing.Linear;
         MapPolyline polyline = new MapPolyline();
         polyline.Points = new ObservableCollection<MapLatLng>()
          {
              new MapLatLng(80.2707, 13.0827),
              new MapLatLng(79.6117, 13.1746),
              new MapLatLng(79.5037, 13.6373),
              new MapLatLng(78.8242, 14.4673),
          };
         polyline.Stroke = Colors.Blue;
         mapPolylineLayer.Polylines.Add(polyline);
         layer.Sublayers.Add(mapPolylineLayer);
         maps.Layer = layer;
         this.Content = maps;
     }

    Line Layer

    Xamarin SfMaps .NET MAUI SfMaps

    -

    MapLine

    -

    From

    -

    To

    -

    Stroke

    -

    StrokeThickness

    -

    StrokeDashArray

    -

    StrokeLineCap

    -

    AnimationEasing

    in

    MapLineLayer

    class

    -

    AnimationDuration

    in

    MapLineLayer

    class

    The following code example explains how to intialize the line layer and it’s customization in Xamarin SfMaps and .NET MAUI SfMaps.

    Xamarin SfMaps .NET MAUI SfMaps

    -

    <map:SfMaps>
        <map:SfMaps.Layer>
            <map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
                <map:MapShapeLayer.Sublayers>
                    <map:MapLineLayer AnimationDuration="3000"
                                      AnimationEasing="{x:Static Easing.Linear}">
                        <map:MapLineLayer.Lines>
                            <map:MapLine StrokeThickness="2"
                                         Stroke="#8a8a8a">
                                <map:MapLine.From>
                                    <map:MapLatLng Latitude="77.1025"
                                                   Longitude="28.7041" />
                                </map:MapLine.From>
                                <map:MapLine.To>
                                    <map:MapLatLng Latitude="-106.3468"
                                                   Longitude="56.1304" />
                                </map:MapLine.To>
                            </map:MapLine>
                        </map:MapLineLayer.Lines>
                    </map:MapLineLayer>
                </map:MapShapeLayer.Sublayers>
            </map:MapShapeLayer>
        </map:SfMaps.Layer>
    </map:SfMaps>
    public MainPage()
    {
        InitializeComponent();
        SfMaps maps = new SfMaps();
        MapShapeLayer layer = new MapShapeLayer();
        layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
        MapLineLayer mapLineLayer = new MapLineLayer();
        mapLineLayer.AnimationDuration = 3000;
        mapLineLayer.AnimationEasing = Easing.Linear;
        MapLine line1 = new MapLine();
        line1.From = new MapLatLng(77.1025, 28.7041);
        line1.To = new MapLatLng(-106.3468, 56.1304);
        line1.Stroke = Color.FromRgb(61, 155, 242);
        line1.StrokeThickness = 2;
        line1.StrokeLineCap = LineCap.Round;
        layer.Sublayers.Add(mapLineLayer);
        maps.Layer = layer;
        this.Content = maps;
    }

    Arc Layer

    Xamarin SfMaps .NET MAUI SfMaps

    -

    MapArc

    -

    From

    -

    To

    -

    Stroke

    -

    StrokeThickness

    -

    StrokeDashArray

    -

    HeightFactor

    -

    ControlPointFactor

    The following code example explains how to intialize the arc layer and it’s customization in Xamarin SfMaps and .NET MAUI SfMaps.

    Xamarin SfMaps .NET MAUI SfMaps

    -

    <map:SfMaps>
        <map:SfMaps.Layer>
            <map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
                <map:MapShapeLayer.Sublayers>
                    <map:MapArcLayer>
                        <map:MapArcLayer.Arcs>
                            <map:MapArc StrokeThickness="2"
                                        Stroke="#8a8a8a" 
                                        ControlPointFactor="0.5" 
                                        HeightFactor="0.2">
                                <map:MapArc.From>
                                    <map:MapLatLng Latitude="77.1025"
                                                   Longitude="28.7041" />
                                </map:MapArc.From>
                                <map:MapArc.To>
                                    <map:MapLatLng Latitude="-106.3468"
                                                   Longitude="56.1304" />
                                </map:MapArc.To>
                            </map:MapArc>
                        </map:MapArcLayer.Arcs>
                    </map:MapArcLayer>
                </map:MapShapeLayer.Sublayers>
            </map:MapShapeLayer>
        </map:SfMaps.Layer>
    </map:SfMaps>
    public MainPage()
    {
        InitializeComponent();
        SfMaps maps = new SfMaps();
        MapShapeLayer layer = new MapShapeLayer();
        layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
        MapArcLayer mapArcLayer = new MapArcLayer();
        MapArc arc = new MapArc();
        arc.From = new MapLatLng(77.1025, 28.7041);
        arc.To = new MapLatLng(-106.3468, 56.1304);
        arc.Stroke = Color.FromRgb(61, 155, 242);
        arc.StrokeThickness = 2;
        arc.ControlPointFactor = 0.5;
        arc.HeightFactor = 0.2;
        layer.Sublayers.Add(mapArcLayer);
        maps.Layer = layer;
        this.Content = maps;
    }

    Circle Layer

    Xamarin SfMaps .NET MAUI SfMaps

    -

    MapCircle

    -

    Center

    -

    Radius

    -

    Stroke

    -

    StrokeThickness

    -

    Fill

    -

    AnimationEasing

    in

    MapCircleLayer

    class

    -

    AnimationDuration

    in

    MapCircleLayer

    class

    The following code example explains how to intialize the circle layer and it’s customization in Xamarin SfMaps and .NET MAUI SfMaps.

    Xamarin SfMaps .NET MAUI SfMaps

    -

    <map:SfMaps>
        <map:SfMaps.Layer>
            <map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/india.json">
                <map:MapShapeLayer.Sublayers>
                    <map:MapCircleLayer AnimationDuration="3000"
                                        AnimationEasing="{x:Static Easing.Linear}">
                        <map:MapCircleLayer.Circles>
                            <map:MapCircle Radius="10" 
                                           Fill="LightGreen" 
                                           Stroke="Green" 
                                           StrokeThickness="2">
                                <map:MapCircle.Center>
                                    <map:MapLatLng Latitude="74.1240"
                                                   Longitude="15.2993"></map:MapLatLng>
                                </map:MapCircle.Center>
                            </map:MapCircle>
                        </map:MapCircleLayer.Circles>
                    </map:MapCircleLayer>
                </map:MapShapeLayer.Sublayers>
            </map:MapShapeLayer>
        </map:SfMaps.Layer>
    </map:SfMaps>
    public MainPage()
    {
        InitializeComponent();
        SfMaps maps = new SfMaps();
        MapShapeLayer layer = new MapShapeLayer();
        layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/india.json"));
        MapCircleLayer circleLayer = new MapCircleLayer();
        circleLayer.AnimationDuration = 3000;
        circleLayer.AnimationEasing = Easing.Linear;
        MapCircle circle1 = new MapCircle();
        circle1.Center = new MapLatLng(74.1240, 15.2993);
        circle1.Radius = 10;
        circle1.Fill = Colors.LightGreen;
        circle1.Stroke = Colors.Green;
        circle1.StrokeThickness = 3;
        circleLayer.Circles.Add(circle1);
        maps.Layer = layer;
        this.Content = maps;
    }

    Zooming and Panning

    Xamarin SfMaps .NET MAUI SfMaps

    ZoomLevel

    ZoomLevel

    in

    MapZoomPanBehavior

    class

    MinZoom

    *MinZoomLevel

    in

    MapZoomPanBehavior

    class

    MaxZoom

    *MaxZoomLevel

    in

    MapZoomPanBehavior

    class

    EnableZooming

    EnableZooming

    in

    MapZoomPanBehavior

    class

    EnablePanning

    EnablePanning

    in

    MapZoomPanBehavior

    class

    -

    EnableDoubleTapZooming

    in

    MapZoomPanBehavior

    class

    -

    EnableCenterAnimation

    in

    MapTileLayer

    class

    -

    EnableZoomingAnimation

    in

    MapLayer

    class

    NOTE

    All the (*) marked APIs are renamed from Xamarin SfMaps to maintain the consistency of API naming in the .NET MAUI SfMaps.

    The following code example explains how to intialize the zooming and it’s customization in Xamarin SfMaps and .NET MAUI SfMaps.

    Xamarin SfMaps .NET MAUI SfMaps
    <maps:SfMaps EnablePanning="True"
                 EnableZooming="True"
                 ZoomLevel="5"
                 MinZoom="3"
                 MaxZoom="10">
        <maps:SfMaps.Layers>
            <maps:ImageryLayer />
        </maps:SfMaps.Layers>
    </maps:SfMaps>
    SfMaps maps = new SfMaps();
    ImageryLayer layer = new ImageryLayer();
    maps.Layers.Add(layer);
    maps.EnablePanning = true;
    maps.EnableZooming = true;
    maps.MinZoom = 3;
    maps.MaxZoom = 10;
    maps.ZoomLevel = 5;
    <map:SfMaps>
        <map:SfMaps.Layer>
            <map:MapTileLayer UrlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png">
                <map:MapTileLayer.ZoomPanBehavior>
                    <map:MapZoomPanBehavior ZoomLevel="5"
                                            MinZoomLevel="3"
                                            MaxZoomLevel="10"
                                            EnablePanning="True"
                                            EnableZooming="True" />
                </map:MapTileLayer.ZoomPanBehavior>
            </map:MapTileLayer>
        </map:SfMaps.Layer>
    </map:SfMaps>
    public MainPage()
    {
       InitializeComponent();
       SfMaps map = new SfMaps();
       MapTileLayer tileLayer = new MapTileLayer();
       tileLayer.UrlTemplate = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
       MapZoomPanBehavior zoomPanBehavior = new MapZoomPanBehavior();
       zoomPanBehavior.ZoomLevel = 5;
       zoomPanBehavior.MinZoomLevel = 3;
       zoomPanBehavior.MaxZoomLevel = 10;
       zoomPanBehavior.EnablePanning = true;
       zoomPanBehavior.EnableZooming = true;
       tileLayer.ZoomPanBehavior = zoomPanBehavior;
       map.Layer = tileLayer;
       this.Content = map;
    }

    Unsupported features from Xamarin.Forms

    • Label support has not been provided in the marker. Instead, you can achieve it using the MarkerTemplate.
    • In .NET MAUI, IntersectionAction support is not provided for data labels.
    • The ShowLegend support is not provided in the .NET MAUI. Instead, set the value for the Legend to display map legend in the .NET MAUI platform.
    • In Xamarin, Layers are maintained as observable collection. But .NET MAUI supports a single Layer.
    • The ResetOnDoubleTap support is not provided in the .NET MAUI.

    Support and feedback

    If you cannot find the migration information you require in the self-help resources listed above, please contact us by creating a support ticket. Do not see what you need? Please request it in our feedback portal.