Getting Started with ASP.NET Core TreeMap Control
23 Jul 202624 minutes to read
This section briefly explains how to include the ASP.NET Core TreeMap control in your ASP.NET Core application using Visual Studio.
Create an ASP.NET Core Web App with Razor Pages
Create an ASP.NET Core Web App using Visual Studio via Microsoft Templates or the Syncfusion® ASP.NET Core Extension. For detailed instructions, refer to the ASP.NET Core Web App Getting Started documentation.
Install the required ASP.NET Core package
To add ASP.NET Core TreeMap control in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for and install the Syncfusion.AspNetCore.TreeMap package. All Syncfusion ASP.NET Core packages are available in nuget.org. See the NuGet packages topic for details.
Alternatively, you can install the same package using the Package Manager Console with the following command.
Install-Package Syncfusion.AspNetCore.TreeMap -Version 34.1.29Add the ASP.NET Core Tag Helpers
After the package is installed, open the ~/Pages/_ViewImports.cshtml file and import the Syncfusion.AspNetCore.Base and Syncfusion.AspNetCore.TreeMap Tag Helpers.
@addTagHelper *, Syncfusion.AspNetCore.Base
@addTagHelper *, Syncfusion.AspNetCore.TreeMapAdd script resources
Include the script reference inside the <head> of ~/Pages/Shared/_Layout.cshtml.
<head>
...
<!-- ASP.NET Core controls scripts -->
<script src="_content/Syncfusion.AspNetCore.TreeMap/scripts/sf-treemap.min.js"></script>
</head>Register the script manager
Open the ~/Pages/Shared/_Layout.cshtml file and register the script manager <ejs-scripts> at the end of the <body> element as follows.
<body>
...
<!-- ASP.NET Core Script Manager -->
<ejs-scripts></ejs-scripts>
</body>Add ASP.NET Core TreeMap control
Add the ASP.NET Core TreeMap control in the ~/Pages/Index.cshtml file.
<ejs-treemap id="treemap">
</ejs-treemap>Render tree map
This section explains how to render the tree map with data source.
@using Syncfusion.EJ2;
<div id="container">
<ejs-treemap id="container" load="load" height="350px" weightValuePath="Count">
<e-treemap-leafitemsettings labelPath="State"></e-treemap-leafitemsettings>
</ejs-treemap>
</div>
<script>
function load(args)
{
var data = [
{ Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
{ Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
{ Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
{ Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
{ Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
{ Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
{ Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
{ Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
];
args.treemap.dataSource = data;
}
</script>Run the application
Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The ASP.NET Core TreeMap control will render in your default web browser.
Here, the tree map is created with data source and set with the weightValuePath as count. You can customize the leaf level tree map items using the leafItemSettings. The properties such as fill, border, and labelPosition can be changed using the leafItemSettings.
Apply color mapping
The color mapping feature supports customization of item colors based on the underlying value of item received from bound data source. Specify the field name from the values that have to be compared for the item in the equalColorValuePath or rangeColorValuePath property.
@{
var mapsData = new List<Syncfusion.EJ2.TreeMap.TreeMapColorMapping>();
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="25", Color="#634D6F" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="12", Color="#B34D6D" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="9", Color="#557C5C" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="7", Color="#44537F" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="6", Color="#637392" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="3", Color="#7C754D" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="2", Color="#2E7A64" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="1", Color="#95659A" });
}
<div id="container">
<ejs-treemap id="container" load="load" height="350px" weightValuePath="Count" equalColorValuePath="Count">
<e-treemap-leafitemsettings labelPath="State" colorMapping="mapsData"></e-treemap-leafitemsettings>
</ejs-treemap>
</div>
<script>
function load(args)
{
var data = [
{ Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
{ Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
{ Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
{ Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
{ Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
{ Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
{ Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
{ Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
];
args.treemap.dataSource = data;
}
</script>
Enable legend
You can show legend for the tree map by setting the visible property to true in legendSettings object.
@{
var mapsData = new List<Syncfusion.EJ2.TreeMap.TreeMapColorMapping>();
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="25", Color="#634D6F" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="12", Color="#B34D6D" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="9", Color="#557C5C" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="7", Color="#44537F" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="6", Color="#637392" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="3", Color="#7C754D" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="2", Color="#2E7A64" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="1", Color="#95659A" });
}
<div id="container">
<ejs-treemap id="container" load="load" height="350px" weightValuePath="Count" equalColorValuePath="Count">
<e-treemap-leafitemsettings labelPath="State" colorMapping="mapsData"></e-treemap-leafitemsettings>
<e-treemap-legendsettings visible="true" position="@Syncfusion.EJ2.TreeMap.LegendPosition.Top" shape="@Syncfusion.EJ2.TreeMap.LegendShape.Rectangle"></e-treemap-legendsettings>
</ejs-treemap>
</div>
<script>
function load(args)
{
var data = [
{ Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
{ Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
{ Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
{ Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
{ Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
{ Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
{ Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
{ Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
];
args.treemap.dataSource = data;
}
</script>
Add labels
The labels are added to show additional information of the items in tree map. By default, the visibility of the label is true. This can be customized using the showLabels property in leafItemSettings.
@{
var mapsData = new List<Syncfusion.EJ2.TreeMap.TreeMapColorMapping>();
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="25", Color="#634D6F" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="12", Color="#B34D6D" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="9", Color="#557C5C" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="7", Color="#44537F" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="6", Color="#637392" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="3", Color="#7C754D" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="2", Color="#2E7A64" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="1", Color="#95659A" });
}
@using Syncfusion.EJ2;
<div id="container">
<ejs-treemap id="container" load="load" height="350px" weightValuePath="Count" equalColorValuePath="Count">
<e-treemap-leafitemsettings labelPath="State" colorMapping="mapsData" showLabels="true" labelPosition="@Syncfusion.EJ2.TreeMap.LabelPosition.Center">
<e-leafitemsettings-labelstyle color="white"></e-leafitemsettings-labelstyle>
</e-treemap-leafitemsettings>
<e-treemap-legendsettings visible="true" position="@Syncfusion.EJ2.TreeMap.LegendPosition.Top" shape="@Syncfusion.EJ2.TreeMap.LegendShape.Rectangle"></e-treemap-legendsettings>
</ejs-treemap>
</div>
<script>
function load(args)
{
var data = [
{ Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
{ Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
{ Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
{ Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
{ Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
{ Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
{ Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
{ Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
];
args.treemap.dataSource = data;
}
</script>
Enable tooltip
The tooltips are used when labels cannot display information due to space constraints. Tooltips can be enabled by setting the visible property to true in tooltipSettings object.
@{
var mapsData = new List<Syncfusion.EJ2.TreeMap.TreeMapColorMapping>();
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="25", Color="#634D6F" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="12", Color="#B34D6D" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="9", Color="#557C5C" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="7", Color="#44537F" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="6", Color="#637392" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="3", Color="#7C754D" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="2", Color="#2E7A64" });
mapsData.Add(new Syncfusion.EJ2.TreeMap.TreeMapColorMapping() { Value="1", Color="#95659A" });
}
@using Syncfusion.EJ2;
<div id="container">
<ejs-treemap id="container" load="load" height="350px" weightValuePath="Count" equalColorValuePath="Count">
<e-treemap-leafitemsettings labelPath="State" colorMapping="mapsData" showLabels="true" labelPosition="@Syncfusion.EJ2.TreeMap.LabelPosition.Center">
<e-leafitemsettings-labelstyle color="white"></e-leafitemsettings-labelstyle>
</e-treemap-leafitemsettings>
<e-treemap-legendsettings visible="true" position="@Syncfusion.EJ2.TreeMap.LegendPosition.Top" shape="@Syncfusion.EJ2.TreeMap.LegendShape.Rectangle"></e-treemap-legendsettings>
<e-treemap-tooltipsettings visible="true"></e-treemap-tooltipsettings>
</ejs-treemap>
</div>
<script>
function load(args)
{
var data = [
{ Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
{ Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
{ Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
{ Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
{ Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
{ Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
{ Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
{ Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
{ Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
{ Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
];
args.treemap.dataSource = data;
}
</script>
NOTE