Getting Started with Blazor Maps component in Blazor MAUI App
18 Nov 20189 minutes to read
This section explains the step-by-step process of integrating the Blazor Maps component into your Blazor MAUI App using both Visual Studio and Visual Studio Code.
Prerequisites
To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to here or the Syncfusion® Blazor Extension.
Create a new Blazor MAUI App in Visual Studio
Create a Blazor MAUI App using Visual Studio via Microsoft Templates. For detailed instructions, refer to the Blazor MAUI App Getting Started documentation.
Prerequisites
To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to here or the Syncfusion® Blazor Extension.
Create a new Blazor MAUI App in Visual Studio Code
Create a Blazor MAUI App using Visual Studio Code via Microsoft Templates or the Syncfusion® Blazor Extension. For detailed instructions, refer to the Blazor MAUI App Getting Started documentation.
Alternatively, create a MAUI application using the following command in the integrated terminal (Ctrl+`).
dotnet new maui-blazor -o MauiBlazorApp
cd MauiBlazorAppInstall required Blazor packages
Install the Syncfusion.Blazor.Maps NuGet package in your project using the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Maps –version 34.1.29).
Alternatively, run the following command in the Package Manager Console to achieve the same.
Install-Package Syncfusion.Blazor.Maps -Version 34.1.29NOTE
All Syncfusion Blazor packages are available on nuget.org. See the NuGet packages topic for details.
Add import namespaces
After the package is installed, open the ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.Maps namespaces.
NOTE
The
~/notation represents the root directory of your project. This file is typically located in your project’s root folder.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.MapsRegister Blazor service
Register the Blazor service in the ~/MauiProgram.cs file. This step enables the Syncfusion components to work in your application.
....
using Syncfusion.Blazor;
....
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
....
builder.Services.AddSyncfusionBlazor();
....
}
}Add script resources
The Syncfusion JavaScript library needs to be included in your application. The script can be accessed from NuGet through Static Web Assets. Include the script reference in the ~/index.html file (this is the root HTML file of your application).
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>NOTE
Check out the Adding Script Reference topic to learn different approaches for adding script references in your Blazor application.
Add Blazor Maps component with GeoJSON data
Add the Blazor Maps component in the ~/Pages/Home.razor file. Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the ShapeData property in MapsLayer to load the GeoJSON shape data into the Maps component.
@using Syncfusion.Blazor.Maps
<!-- SfMaps is the root container component for the maps -->
<SfMaps>
<!-- MapsLayers contains one or more map layers to display on the map -->
<MapsLayers>
<!-- MapsLayer defines a map layer with shape data and configuration -->
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
</MapsLayer>
</MapsLayers>
</SfMaps>NOTE
The “world-map.json” file contains the World map GeoJSON data.
How to run the sample on Windows
Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
How to run the sample on Android
To run the Blazor Maps in a Blazor Android MAUI application using the Android emulator, follow these steps:
Refer here to install and launch Android emulator.
NOTE
If encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidanceTroubleshooting Android Emulator.
Bind data source
The DataSource property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list SecurityCouncilDetails to the DataSource property in MapsLayer.
@code {
public List<UNCouncilCountry> SecurityCouncilDetails = new List<UNCouncilCountry>{
new UNCouncilCountry { Name= "China", Membership= "Permanent" },
new UNCouncilCountry { Name= "France", Membership= "Permanent" },
new UNCouncilCountry { Name= "Russia", Membership= "Permanent" },
new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent" },
new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent" },
new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent" },
new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent" },
new UNCouncilCountry { Name= "United States", Membership= "Permanent" },
new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent" },
new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent" },
new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent" },
new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent" },
new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent" },
new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent" },
new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent" }
};
public class UNCouncilCountry
{
public string Name { get; set; }
public string Membership { get; set; }
};
}NOTE
The United Nations Security Council data is referred from source.
You should also specify the field names in the shape data and data source to the ShapePropertyPath and ShapeDataPath properties, respectively. These are used to identify the appropriate shapes and match the specific data source values to them.
The following complete example shows a Maps component with the GeoJSON layer and data source binding:
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
ShapePropertyPath='new string[] {"name"}'
DataSource="SecurityCouncilDetails"
ShapeDataPath="Name" TValue="UNCouncilCountry">
</MapsLayer>
</MapsLayers>
</SfMaps>
@code {
public List<UNCouncilCountry> SecurityCouncilDetails = new List<UNCouncilCountry>{
new UNCouncilCountry { Name= "China", Membership= "Permanent" },
new UNCouncilCountry { Name= "France", Membership= "Permanent" },
new UNCouncilCountry { Name= "Russia", Membership= "Permanent" },
new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent" },
new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent" },
new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent" },
new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent" },
new UNCouncilCountry { Name= "United States", Membership= "Permanent" },
new UNCouncilCountry { Name= "Bolivia", Membership= "Non-Permanent" },
new UNCouncilCountry { Name= "Eq. Guinea", Membership= "Non-Permanent" },
new UNCouncilCountry { Name= "Ethiopia", Membership= "Non-Permanent" },
new UNCouncilCountry { Name= "Côte d Ivoire", Membership= "Permanent" },
new UNCouncilCountry { Name= "Kuwait", Membership= "Non-Permanent" },
new UNCouncilCountry { Name= "Netherlands", Membership= "Non-Permanent" },
new UNCouncilCountry { Name= "Peru", Membership= "Non-Permanent" }
};
public class UNCouncilCountry
{
public string Name { get; set; }
public string Membership { get; set; }
};
}This example demonstrates the complete setup with:
- The ShapeData pointing to the GeoJSON world map
- The ShapePropertyPath set to
"name"to match shape names - The DataSource bound to
SecurityCouncilDetails - The ShapeDataPath set to
"Name"to match data source field
NOTE
Please refer to the section for more information on data binding.
NOTE