--- title: "Introducing the New .NET MAUI Maps Control" published_at: "2022-07-14T11:29:53+00:00" modified_at: "2026-02-10T08:23:55+00:00" url: "https://www.syncfusion.com/blogs/post/introducing-the-new-net-maui-maps-control" excerpt: "We at Syncfusion are very happy to announce the inclusion of the new .NET MAUI Maps control in the 2022 Volume 2 release. The .NET MAUI Maps control is a powerful data visualization component that displays statistical information for a..." taxonomy_category: - ".NET MAUI" - "Desktop" - "Mobile" - "Syncfusion" - "UI" - "What's new" taxonomy_post_tag: - ".NET MAUI" - "Maps" - "Mobile" - "What's New" - "Xamarin.Forms" --- # Introducing the New .NET MAUI Maps Control [Sheik Syed](https://www.syncfusion.com/blogs/author/sheiksyedm) ![Introducing the New .NET MAUI Maps Control](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Introducing-the-New-.NET-MAUI-Maps-Control.png) We at [Syncfusion](https://www.syncfusion.com/) are very happy to announce the inclusion of the new [.NET MAUI Maps](https://www.syncfusion.com/maui-controls/maui-maps) control in the [2022 Volume 2](https://www.syncfusion.com/forums/175975/essential-studio-2022-volume-2-main-release-v20-2-0-36-is-available-for-download) release. The .NET MAUI Maps control is a powerful data visualization component that displays statistical information for a geographical area. It has highly interactive and customizable features such as selection, tooltips, legends, markers, bubbles, and color mapping. You can generate and view important data such as population density, weather forecasts, geographical features, political boundaries, elections, and routes. Users can view not only a geographical map, but also view custom shapes such as a floorplan of a room or building, or a venue’s seating layout using the .NET MAUI Maps control. ![.NET MAUI Maps Control](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/NET-MAUI-Maps-Control.png) .NET MAUI Maps Control **Note:** The Syncfusion .NET MAUI Maps control is implemented to read input shape data and draw the right shapes. Syncfusion does not support shape designing or shapefile generation. For this purpose, we recommend using [online map providers](https://en.wikipedia.org/wiki/List_of_online_map_services) . Let’s see the features of the Maps control and how to integrate it into your .NET MAUI application. ## Shape layer We can use the [shape layer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html) to represent the world map, a specific country or region, or a custom shape such as a building. The shapes will be rendered from input files such as GeoJSON (.json) or Shapefile (.shp). You can load shape files from the following sources: - [FromFile](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapSource.html#Syncfusion_Maui_Maps_MapSource_FromFile_System_String_) : Returns a MapSource that reads a shape source from a local file. - [FromUri](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapSource.html#Syncfusion_Maui_Maps_MapSource_FromUri_System_Uri_) : Returns a MapSource that downloads and reads a shape source from a specified URI. - [FromResource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapSource.html#Syncfusion_Maui_Maps_MapSource_FromStream_System_IO_Stream_System_IO_Stream_) : Returns a MapSource that reads a shape source file embedded in an assembly. - [FromStream](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapSource.html#Syncfusion_Maui_Maps_MapSource_FromStream_System_IO_Stream_) : Returns a MapSource that reads a shape source from a stream that supplies source data. ![Rendering the Australian Continent Using Shape Layer in .NET MAUI Maps](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Rendering-the-Australian-Continent-Using-Shape-Layer-in-.NET-MAUI-Maps.png) ## Data labels [Data labels](https://help.syncfusion.com/maui/maps/data-labels) provide users with information such as identification, notification, warning, environmental advice, and other general information about the shapes or regions. In short, they are simply text shown over the shapes. Data labels will smartly arrange themselves when they exceed their region bounds. ![Data Labels in .NET MAUI Maps Control](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Data-Labels-in-.NET-MAUI-Maps-Control.png) ## Markers [Markers](https://help.syncfusion.com/maui/maps/markers) are used to denote specific locations with exact latitudes and longitudes (geocoordinates) on maps. A marker, by default, uses a standard shape such as a circle, diamond, square, or triangle. You can customize the markers to display any custom content or image instead of these predefined shapes. You can also use the markers’ tap or click interaction for custom functionalities such as navigation or a custom info window. ![Markers in .NET MAUI Maps Control](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Markers-in-.NET-MAUI-Maps-Control.jpg) ## Bubbles [Bubbles](https://help.syncfusion.com/maui/maps/bubble) are yet another data visualization medium. They summarize your input data. You can add information such as population density and the number of users to map regions. You can render them in different colors and sizes based on the data of their respective regions. ### Color customization You can customize the colors of the bubbles and their transparency based on the data of the regions. ![Bubbles Color Customization in .NET MAUI Maps Control](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Bubbles-Color-Customization-in-.NET-MAUI-Maps-Control.jpg) ### Size customization You can plot the bubbles in different sizes based on the data to enhance their readability. ![Bubbles Size Customization in .NET MAUI Maps](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Bubbles-Size-Customization-in-.NET-MAUI-Maps.jpg) ## Legend A map may have many different symbols, making it more difficult for users to understand each one. That is where legends come in handy. A [legend](https://help.syncfusion.com/maui/maps/legend) is a glossary of the symbols used in a map that conveys clear information about the data plotted. With this, you can display information about the shapes or bubbles plotted. ### Shape legend You can show legends for data represented by shapes. ![Shape Legend in .NET MAUI Maps](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Shape-Legend-in-.NET-MAUI-Maps.jpg) ### Bubble legend Show legends for data represented by bubbles. ![Bubble Legend in .NET MAUI Maps](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Bubble-Legend-in-.NET-MAUI-Maps.jpg) ### Position Also, you can move the legend to any side of a map. ![Legend Position Customization in .NET MAUI Maps](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Legend-Position-Customization-in-.NET-MAUI-Maps.jpg) ## Tooltip Add tooltips to show additional information about shapes, bubbles, and markers when you tap, click, or hover over (on desktop) them. ![Shape Tooltip in .NET MAUI Maps](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Shape-Tooltip-in-.NET-MAUI-Maps.jpg) Shape Tooltip in .NET MAUI Maps ![Bubble Tooltip in .NET MAUI Maps](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Bubble-Tooltip-in-.NET-MAUI-Maps.jpg) Bubble Tooltip in .NET MAUI Maps ![Marker Tooltip in .NET MAUI Maps](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Marker-Tooltip-in-.NET-MAUI-Maps.jpg) Marker Tooltip in .NET MAUI Maps ## Color mapping You can categorize a shape or bubble on a map by customizing its color based on its data. The .NET MAUI Maps control supports two types of color mapping: - [Equal color mapping](https://help.syncfusion.com/maui/maps/shape#equal-color-mapping) - [Range color mapping](https://help.syncfusion.com/maui/maps/shape#range-color-mapping) ### Equal color mapping Apply a specific color to a shape based on its data. For example, apply colors to countries based on their organization membership. ![Equal Color Mapping in .NET MAUI Maps](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Equal-Color-Mapping-in-.NET-MAUI-Maps.jpg) ### Range color mapping Apply colors to regions if their data falls within a specific range. For example, you can apply colors to countries based on their population density. ![Range Color Mapping in .NET MAUI Maps](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Range-Color-Mapping-in-.NET-MAUI-Maps.jpg) ## Selection You can highlight a shape to focus attention on a specific area. Use this functionality to navigate pages and show detailed information about a selected area. ![Highlighting a Region in .NET MAUI Maps](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Highlighting-a-Region-in-.NET-MAUI-Maps.jpg) ## Add the .NET MAUI Maps to your application Let’s see how to create a simple .NET MAUI app with the Maps control to demonstrate its primary usage. ### Step 1: Create a .NET MAUI app. First, [create a new .NET MAUI app](https://docs.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-android) in [Visual Studio](https://visualstudio.microsoft.com/) . ### Step 2: Install the NuGet packages. Syncfusion .NET MAUI controls are available in [NuGet Gallery](https://www.nuget.org/) . To add the SfMaps control to your project, open the NuGet package manager in Visual Studio. Search for **Syncfusion.Maui.Maps** and then install it. ### Step 3: Handler registration. The [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) NuGet package is a dependent package for all our Syncfusion .NET MAUI controls. In the **MauiProgram.cs** file, register the handler for Syncfusion core using the ** ConfigureSyncfusionCore**() method. Refer to the following code. ``` public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp() .ConfigureSyncfusionCore() .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); }); return builder.Build(); } ``` ### Step 4: Import the namespace. Then, import the control namespace **Syncfusion.Maui.Maps** in your XAML or C# code. ``` xmlns:map="clr-namespace:Syncfusion.Maui.Maps;assembly=Syncfusion.Maui.Maps" ``` ### Step 5: Initialize the Maps control. Now, initialize the SfMaps control. ``` ``` ### Step 6: Add GeoJSON or shapefile data to the shape layer. The [MapShapeLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html) of [SfMaps](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.SfMaps.html) handles the actual geographical rendering. The shapes source, such as GeoJson or shapefile data, is set to the [ShapesSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_ShapesSource) property of the [MapShapeLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html) . The [ShapesSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_ShapesSource) property is used to load the shapes of the map from different sources: - **FromFile**: Returns a new [MapSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapSource.html) object that reads the shape source from a local file. - **FromUri**: Returns a new [MapSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapSource.html) object that downloads and reads the shape source data from a specified URI. - **FromResource**: Returns a new [MapSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapSource.html) object that reads the shape source in an assembly. - **FromStream**: Returns a new [MapSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapSource.html) object that reads the shape source from a stream. **XAML** ``` ``` **C#** ``` public MainPage() { InitializeComponent(); this.layer.ShapesSource = MapSource.FromResource("GettingStarted_MAUI_Maps.australia.json"); } ``` ![Rendering the Australian Continent Using Shape Layer in .NET MAUI Maps](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Rendering-the-Australian-Continent-Using-Shape-Layer-in-.NET-MAUI-Maps.png) ### Step 7: Map the data source for the shape layer. The [DataSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_DataSource) property accepts the collection of values as input. The [PrimaryValuePath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_PrimaryValuePath) property refers to the data ID in the [DataSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_DataSource) . The [ShapeDataField](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_ShapeDataField) property of the MapShapeLayer is used to refer to the unique field name in the shape source (.json or .shp files) to identify each shape. When the values of the [PrimaryValuePath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_PrimaryValuePath) property in the DataSource and the values of [ShapeDataField](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_ShapeDataField) in the shape data are matched, the associated object from the data source will be bound to the corresponding shape. **XAML** ``` ``` **C#** ``` public class ViewModel { public ObservableCollection Data { get; set; } public ViewModel() { Data = new ObservableCollection(); Data.Add(new Model("New South Wales", "New\nSouth Wales", 1)); Data.Add(new Model("Queensland", "Queensland",2)); Data.Add(new Model("Northern Territory", "Northern\nTerritory",3)); Data.Add(new Model("Victoria", "Victoria",4)); Data.Add(new Model("Tasmania", "Tasmania",5)); Data.Add(new Model("Western Australia", "Western Australia",6)); Data.Add(new Model("South Australia", "South Australia",7)); } public class Model { public string State { get; set; } public string StateCode { get; set; } public int ID { get; set; } public Model(string state, string stateCode, int id) { State = state; StateCode = stateCode; ID = id; } } } ``` ### Step 8: Add basic map elements. Finally, add the essential map elements: - **Data labels**: You can show data labels using the [ShowDataLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_ShowDataLabels) property and customize them using the [DataLabelSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_DataLabelSettings) property. - **Legend**: You can enable a legend using the [Legend](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_Legend) property. The text of the legend will be displayed based on the [ColorMapping.Text](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.ColorMapping.html#Syncfusion_Maui_Maps_ColorMapping_Text) property. You can also customize the legend text using the [TextStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapLegend.html#Syncfusion_Maui_Maps_MapLegend_TextStyle) property. - **Tooltip**: You can enable tooltips for the shapes using the [ShowShapeTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_ShowShapeTooltip) property. One will be displayed when you interact with the shapes, i.e. while tapping using touch devices and hovering using the mouse. - **Color mapping**: You can apply color for shapes using the [EqualColorMapping](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.EqualColorMapping.html) or [RangeColorMapping](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.RangeColorMapping.html?tabs=tabid-1) properties by mapping the [ShapeColorValuePath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_ShapeColorValuePath) property. Refer to the following code. ``` ``` ![Rendering a Map using the .NET MAUI Maps Control](https://www.syncfusion.com/blogs/wp-content/uploads/2022/07/Rendering-a-Map-using-the-.NET-MAUI-Maps-Control.png) ## What’s next? We plan to include more exciting features for the Maps control in our upcoming releases. Some of them are: - Support for imagery layers such as Bing Maps, OpenStreetMap, etc. - Zooming and panning. - Legend interaction. ## GitHub reference For more information, refer to our [.NET MAUI Maps Getting Started demo project.](https://github.com/SyncfusionExamples/.NET-MAUI-Maps-Getting-Started) ## Conclusion Thanks for reading! In this blog, we walked you through our new [Syncfusion .NET MAUI Maps control](https://www.syncfusion.com/maui-controls/maui-maps) and its features rolled out in the [2022 Volume 2](https://www.syncfusion.com/forums/175975/essential-studio-2022-volume-2-main-release-v20-2-0-36-is-available-for-download) release. This control was developed with restructured APIs and the .NET MAUI graphics library with consideration for various use cases and performance aspects. For more details, check out the [.NET MAUI Maps NuGet package](https://www.nuget.org/packages/Syncfusion.Maui.Maps) and [user guide](https://help.syncfusion.com/maui/maps/getting-started) . Please let us know in the comments section below if you need a specific feature in our .NET MAUI Maps control. Also, you can contact us through our [support forums](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms) . We are always happy to assist you! ## Related blogs - [Syncfusion Essential Studio® 2022 Volume 2 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-2-is-here.aspx) - [What’s New in .NET MAUI: 2022 Volume 2](https://www.syncfusion.com/blogs/post/whats-new-in-net-maui-2022-volume-2.aspx) - [Introducing the New .NET MAUI DataGrid Control](https://www.syncfusion.com/blogs/post/introducing-the-new-net-maui-datagrid-control.aspx) - [Introducing .NET MAUI Loading Indicator (Busy Indicator)](https://www.syncfusion.com/blogs/post/introducing-net-maui-loading-indicator-busy-indicator.aspx)