Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 50 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,59 @@
# Customizing the Blazor Maps Component Data Labels

This sample explains about how to add data labels to a Syncfusion Blazor Maps in a Blazor WebAssembly app. This project also includes a code snippet to format the maps data labels, arrange the data labels intelligently and add custom labels to the Blazor Maps.
This sample project demonstrates how to work with **data labels in the Syncfusion Blazor Maps component** using a **Blazor WebAssembly application**. It focuses on displaying meaningful information directly on map shapes by configuring and formatting data labels effectively.

**Examples**: https://blazor.syncfusion.com/demos/maps/data-labels?theme=bootstrap5
The project showcases practical techniques to enhance map visualization by improving label readability, placement, and customization. It is intended for developers who want to understand how data labels can be integrated and refined within geographic maps built using Syncfusion Blazor UI components.

**Documentation**: https://blazor.syncfusion.com/documentation/maps/data-labels
## Project Overview

Blazor Maps provides powerful data visualization capabilities for geographic data. This sample explains how data labels can be added to maps and adjusted to improve clarity when displaying region-based or shape-based information.

The sample includes:
- Rendering data labels on map shapes
- Formatting label text
- Intelligent arrangement of overlapping labels
- Adding custom labels based on map data

All examples are implemented using Syncfusion Blazor Maps within a Blazor WebAssembly project.

## Key Features

- Add and display data labels on Blazor Maps
- Format data label text for better presentation
- Automatically arrange labels to avoid overlap
- Customize labels based on map shape data
- Built using Syncfusion Blazor Maps components

## Prerequisites

* Visual Studio 2022
To work with this project, ensure the following software is installed:

- Visual Studio 2022
- .NET SDK compatible with Blazor WebAssembly
- A valid Syncfusion license or trial setup

## How to Run the Project

1. Check out this project to a local directory on your system.
2. Open the solution file using **Visual Studio 2022**.
3. Restore the required NuGet packages by rebuilding the solution.
4. Run the project using the built-in debugger or IIS Express.
5. View the Blazor Maps data labels rendering in the browser.

## Usage

Once the application is running, explore the map component to see how data labels are displayed and customized. You can review the included code snippets to understand how label formatting, positioning, and customization are applied within the Blazor Maps configuration.

## Additional Resources

**Examples**
- https://blazor.syncfusion.com/demos/maps/data-labels?theme=bootstrap5

**Documentation**
- https://blazor.syncfusion.com/documentation/maps/data-labels

## How to run the project
## Support

* Checkout this project to a location in your disk.
* Open the solution file using the Visual Studio 2022.
* Restore the NuGet packages by rebuilding the solution.
* Run the project.
For additional help or troubleshooting:
- Refer to the official Syncfusion documentation
- Visit the Syncfusion support forums for Blazor-related questions
Loading