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();
...
|
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
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
Methods
Events
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
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
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
Equal color mapping
Range color mapping
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
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
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;
}
|
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
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
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
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
Equal color mapping
Range color mapping
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
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
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
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
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
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
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;
}
|
- 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.