Syncfusion AI Assistant

How can I help you?

Getting Started with the ASP.NET Core Maps Control

22 May 20266 minutes to read

This section explains how to add the Syncfusion® ASP.NET Core Maps control to your application using Visual Studio.

To get started quickly with the ASP.NET Core Maps control, watch the following video:

Prerequisites

Refer to the System requirements for ASP.NET Core components before creating the application.

Create an ASP.NET Core Web Application with Razor Pages

You can create an ASP.NET Core application using either of the following options:

Create an ASP.NET Core Razor Pages Project Using Visual Studio

  1. Start Visual Studio and select Create a new project.

  2. In the Create a new project window, choose ASP.NET Core Web App (Razor Pages) → Next.

  3. In the Configure your new project dialog, specify the project name (and optionally change location/folder).

  4. Click Next.

  5. In the Additional information dialog:
    • Select .NET 10.0 or the latest supported .NET version.
    • Ensure that Do not use top-level statements is unchecked.
  6. Click Create.

For alternative approaches to create the project, see Create a new project in Visual Studio.

Install ASP.NET Core Package in the Application

To add Syncfusion® ASP.NET Core controls in the application, open the NuGet Package Manager in Visual Studio by selecting (Tools → NuGet Package Manager → Manage NuGet Packages for Solution). Search for Syncfusion.EJ2.AspNet.Core and install it.

Alternatively, you can use the Package Manager Console by navigating to: Tools → NuGet Package Manager → Package Manager Console, and then run the following command:

Install-Package Syncfusion.EJ2.AspNet.Core -Version 33.2.3

Create an ASP.NET Core Razor Pages Project Using Visual Studio Code

  1. Install the latest .NET SDK that supports .NET 10.0 or later.
  2. Open Visual Studio Code.
  3. Press Ctrl + ` to open the integrated terminal.
  4. Run the following command to create the project:
dotnet new webapp -o SyncfusionApp

Then, open the project in a new Visual Studio Code window using the following command:

code -r SyncfusionApp

Install ASP.NET Core Package in the Application

To integrate the Syncfusion® ASP.NET Core Maps control, install the required Syncfusion.EJ2.AspNet.Core NuGet packages using the integrated terminal:

  1. Navigate to the directory containing the .csproj file.
  2. Run the following commands to install the package:
dotnet add package Syncfusion.EJ2.AspNet.Core --version 33.2.3

NOTE

Syncfusion® ASP.NET Core controls are available on nuget.org. Refer to the NuGet packages topic to learn more about installing NuGet packages in various operating system environments. The Syncfusion.EJ2.AspNet.Core NuGet package depends on Newtonsoft.Json for JSON serialization and Syncfusion.Licensing for validating the Syncfusion® license key.

Add the Syncfusion® ASP.NET Core Tag Helper

Open the ~/Pages/_ViewImports.cshtml file and import the Syncfusion.EJ2 Tag Helper.

@addTagHelper *, Syncfusion.EJ2

Add Script Resources

Add the script reference inside the <head> element of the ~/Pages/Shared/_Layout.cshtml file as follows.

<head>
    ...
    <!-- Syncfusion ASP.NET Core controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js"></script>
</head>

NOTE

Refer to the Adding Script Reference topic to learn different approaches for adding script references in your ASP.NET Core application.

Register the Syncfusion® Script Manager

Register the script manager <ejs-scripts> at the end of the <body> element in the ASP.NET Core application as follows.

<body>
    ...
    <!-- Syncfusion ASP.NET Core Script Manager -->
    <ejs-scripts></ejs-scripts>
</body>

Add the ASP.NET Core Maps Control

Add the Syncfusion® ASP.NET Core Maps tag helper to the ~/Pages/Index.cshtml page.

@using Syncfusion.EJ2.Maps

<ejs-maps id="maps">
</ejs-maps>

Render Shapes from WorldMap.json Data

Elements in the Maps control are rendered as layers. Add a layer to the Maps control using the Layers property. Then, bind the WorldMap.json data to the ShapeData property.

@using Newtonsoft.Json
@using Syncfusion.EJ2.Maps

@{
    string allText = System.IO.File.ReadAllText("wwwroot/scripts/MapsData/WorldMap.json");
    var WorldMapData = JsonConvert.DeserializeObject(allText);
}

<ejs-maps id="maps">
    <e-maps-layers>
        <e-maps-layer shapeData="WorldMapData">
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

Press Ctrl + F5 on Windows or ⌘ + F5 on macOS to run the application in
Visual Studio. If you are using Visual Studio Code, run the following command in the terminal:

dotnet run

The Syncfusion® ASP.NET Core Maps control will be rendered in the default web browser.

ASP.NET Core Maps Control

NOTE

Map layers render only when ShapeData is provided. Refer to the world map data values.

NOTE

Explore the sample on GitHub to understand how this getting started example works.

See Also