diff --git a/GettingStarted_MAUI_Maps/App.xaml.cs b/GettingStarted_MAUI_Maps/App.xaml.cs index 91a35aa..e53dd88 100644 --- a/GettingStarted_MAUI_Maps/App.xaml.cs +++ b/GettingStarted_MAUI_Maps/App.xaml.cs @@ -2,10 +2,14 @@ public partial class App : Application { - public App() - { - InitializeComponent(); + public App() + { + InitializeComponent(); + } + + protected override Window CreateWindow(IActivationState activationState) + { + return new Window(new AppShell()); + } - MainPage = new AppShell(); - } } diff --git a/GettingStarted_MAUI_Maps/GettingStarted_MAUI_Maps.csproj b/GettingStarted_MAUI_Maps/GettingStarted_MAUI_Maps.csproj index 7d5dc01..68d6d0c 100644 --- a/GettingStarted_MAUI_Maps/GettingStarted_MAUI_Maps.csproj +++ b/GettingStarted_MAUI_Maps/GettingStarted_MAUI_Maps.csproj @@ -1,8 +1,8 @@  - net9.0-android;net9.0-ios;net9.0-maccatalyst - $(TargetFrameworks);net9.0-windows10.0.19041.0 + net10.0-android;net10.0-ios;net10.0-maccatalyst + $(TargetFrameworks);net10.0-windows10.0.19041.0 Exe @@ -10,6 +10,7 @@ true true enable + true GettingStarted_MAUI_Maps @@ -22,8 +23,8 @@ 1.0 1 - 14.2 - 14.0 + 15.0 + 15.0 21.0 10.0.17763.0 10.0.17763.0 @@ -58,7 +59,8 @@ - + + diff --git a/MAUI-Maps.png b/MAUI-Maps.png new file mode 100644 index 0000000..2ada1a5 Binary files /dev/null and b/MAUI-Maps.png differ diff --git a/README.md b/README.md index 65bbabc..bcbc7cb 100644 --- a/README.md +++ b/README.md @@ -1,52 +1,361 @@ -# .NET MAUI Maps Getting Started +# GettingStarted_MAUI_Maps -This repository contains sample to get started with the [Syncfusion .NET MAUI Maps](https://help.syncfusion.com/maui/maps/getting-started) control. 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, tooltip, legends, markers, bubbles, and color mapping. +## Creating an application using the .NET MAUI Maps -## Syncfusion controls +1. Create a new .NET MAUI application in Visual Studio. +2. Syncfusion .NET MAUI components are available in [nuget.org](https://www.nuget.org/). To add SfMaps to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Maps and then install it. +3. To initialize the control, import the Maps namespace. +4. Initialize [SfMaps](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.SfMaps.html) with [MapShapeLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html). -This project used the following Syncfusion control(s): -* [SfMaps](https://www.syncfusion.com/maui-controls/maui-maps) +###### Xaml +```xaml + -## Supported platforms + + + + + + +``` -.NET Multi-platform App UI (.NET MAUI) apps can be written for the following platforms: +###### C# +```C# +using Syncfusion.Maui.Maps; -* Android 5.0 (API 21) or higher. -* iOS 10 or higher. -* macOS 10.13 or higher, using Mac Catalyst. -* Windows 11 and Windows 10 version 1809 or higher, using [Windows UI Library (WinUI) 3](https://learn.microsoft.com/en-us/windows/apps/winui/winui3/). +namespace GettingStarted_MAUI_Maps; -## Requirements to run the sample +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + } +} +``` -* [Visual Studio 2022 Preview](https://learn.microsoft.com/en-us/visualstudio/releases/2022/release-notes-preview) version 17.3.4 or higher (.NET MAUI version 6.0.486) or [Visual Studio 2022 for Mac 17.4 Preview](https://visualstudio.microsoft.com/vs/mac/preview/). -* .NET 6.0 +## Register the handler -Refer to the following link for more details: [System Requirements](https://help.syncfusion.com/maui/system-requirements) +Syncfusion.Maui.Core nuget is a dependent package for all Syncfusion controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion core. -## How to run the sample +###### +```C# +using Syncfusion.Maui.Core.Hosting; -1. Clone the sample and open it in Visual Studio 2022 Preview. +namespace GettingStarted_MAUI_Maps; - *Note: If you download the sample using the "Download ZIP" option, right-click it, select Properties, and then select Unblock.* +public static class MauiProgram +{ + 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"); + }); -2. Register your license key in the App.cs file as demonstrated in the following code. + return builder.Build(); + } +} +``` - public App() - { - //Register Syncfusion license - Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY"); - - InitializeComponent(); - - MainPage = new MainPage(); - } - - Refer to this [link](https://help.syncfusion.com/maui/licensing/overview) for more details. - -3. Clean and build the application. +## Initialize view model -4. Run the application. +Now, let us define a simple data model that represents geographical data for the map. +###### C# +```C# +public class Model +{ + public string State { get; set; } + public string StateCode { get; set; } + public int ID { get; set; } -## License + public Model(string state, string stateCode, int id) + { + State = state; + StateCode = stateCode; + ID = id; + } +} +``` -Syncfusion has no liability for any damage or consequence that may arise by using or viewing the samples. The samples are for demonstrative purposes, and if you choose to use or access the samples, you agree to not hold Syncfusion liable, in any form, for any damage that is related to use, for accessing, or viewing the samples. By accessing, viewing, or seeing the samples, you acknowledge and agree Syncfusion’s samples will not allow you seek injunctive relief in any form for any claim related to the sample. If you do not agree to this, do not view, access, utilize, or otherwise do anything with Syncfusion’s samples. +Next, create a ViewModel class and initialize an ObservableCollection of `Model` objects with Australian states as follows. +###### +```C# +using System.Collections.ObjectModel; + +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)); + } +} +``` + +* Create a `ViewModel` instance and set it as the Grid's `BindingContext`. This enables property binding from `ViewModel` class. + +* Add namespace of `ViewModel` class to your XAML Page, and set `BindingContext` in XAML. +###### Xaml +```xaml + + + + + +``` + +## Add a shape layer with GeoJSON data + +Adding a [MapShapeLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html) to the maps and setting the [ShapesSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_ShapesSource) property to load GeoJSON data to create a geographical map view. + +* The maps has [Layer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.SfMaps.html#Syncfusion_Maui_Maps_SfMaps_Layer) as its default content. + +* The [ShapesSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_ShapesSource) can be set from various sources like local file, Uri, or embedded resource. + +* The [ShapeDataField](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_ShapeDataField) property identifies the field in the GeoJSON that contains the shape names. + +* The [DataSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_DataSource) property binds the data from ViewModel. + +* The [PrimaryValuePath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_PrimaryValuePath) property maps the data to shapes based on the State field. + +###### Xaml +```xaml + + + + + +``` +###### C# +```C# +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + this.layer.ShapesSource = MapSource.FromResource("GettingStarted_MAUI_Maps.australia.json"); + } +} +``` + +## Display data labels + +The [ShowDataLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_ShowDataLabels) property enables data labels to display information about each shape. The [DataLabelSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_DataLabelSettings) property customizes the label display using [DataLabelPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapDataLabelSettings.html#Syncfusion_Maui_Maps_MapDataLabelSettings_DataLabelPath). + +###### Xaml +```xaml + + + + + +``` + +## Add color mapping + +The [ColorMappings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_ColorMappings) property is used to apply different colors to map shapes based on values. The [EqualColorMapping](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.EqualColorMapping.html) maps specific color values to corresponding data. + +###### Xaml +```xaml + + + + + + +``` + +## Add markers + +The [MapMarker](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapMarker.html) can be used to denote a specific location on the map with a custom symbol. + +###### Xaml +```xaml + + + + + +``` + +## Enable tooltip + +Tooltips are used to show information about a shape when hovering over it. Enable tooltip by setting the [ShowShapeTooltip](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_ShowShapeTooltip) property of [MapShapeLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html). + +###### Xaml +```xaml + +``` + +## Enable a legend + +The legend provides information about the map elements and their corresponding colors. Enable it by adding the [Legend](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html#Syncfusion_Maui_Maps_MapShapeLayer_Legend) to the [MapShapeLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html). Set [SourceType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapLegend.html#Syncfusion_Maui_Maps_MapLegend_SourceType) to Shape and [Placement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapLegend.html#Syncfusion_Maui_Maps_MapLegend_Placement) to position it. + +###### Xaml +```xaml + + + +``` + +The following code example gives you the complete code of above configurations. +###### Xaml +```xaml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` +###### C# +```C# +using Syncfusion.Maui.Maps; + +namespace GettingStarted_MAUI_Maps; + +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + this.layer.ShapesSource = MapSource.FromResource("GettingStarted_MAUI_Maps.australia.json"); + } +} +``` + +###### ViewModel +```C# +using System.Collections.ObjectModel; + +namespace GettingStarted_MAUI_Maps +{ + 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; + } + } + } +} +``` + + \ No newline at end of file