Getting Started with the ASP.NET Core Maps Control

23 Jul 20265 minutes to read

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

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

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.

Run the following command to create a new ASP.NET Core Web App.

dotnet new webapp -o RazorPagesMovie
code -r RazorPagesMovie

Alternatively, create an ASP.NET Core Web App using Visual Studio Code via Microsoft Templates, or the Syncfusion® ASP.NET Core Extension, or the C# Dev Kit extension.

Install the required ASP.NET Core packages

Install Syncfusion.AspNetCore.Maps NuGet package. All Syncfusion ASP.NET Core packages are available in nuget.org. See the NuGet packages topic for the details.

  1. Go to Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
  2. Search the required NuGet package (Syncfusion.AspNetCore.Maps) and install it.

Alternatively, you can install the same packages using the Package Manager Console with the following command.

Install-Package Syncfusion.AspNetCore.Maps -Version 34.1.29

Open the terminal and run the following command.

dotnet add package Syncfusion.AspNetCore.Maps -v 34.1.29

Add the ASP.NET Core Tag Helpers

After the packages are installed, open the ~/Pages/_ViewImports.cshtml file and import the Syncfusion.AspNetCore.Base and Syncfusion.AspNetCore.Maps Tag Helpers.

@addTagHelper *, Syncfusion.AspNetCore.Base
@addTagHelper *, Syncfusion.AspNetCore.Maps

Add Script Resources

Include the script reference inside the <head> of ~/Pages/Shared/_Layout.cshtml.

<head>
    ...
    <!-- Syncfusion ASP.NET Core controls scripts -->
    <script src="_content/Syncfusion.AspNetCore.Maps/scripts/sf-maps.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 the ASP.NET Core Maps Control

Add the ASP.NET Core Maps control in the ~/Pages/Index.cshtml file.

@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>

Run the application

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The ASP.NET Core Maps control will render in your default web browser.

Open the terminal and run the following command.

dotnet run

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

  1. Getting Started with ASP.NET Core using Razor Pages
  2. Getting Started with ASP.NET Core MVC using Tag Helper