Syncfusion AI Assistant

How can I help you?

Getting Started with the ASP.NET MVC Maps Control

20 May 20264 minutes to read

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

You can explore some useful features in the Maps control using the following video.

Prerequisites

Refer to the System requirements for ASP.NET MVC controls before creating the application.

Create an ASP.NET MVC Application with HTML Helper

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

Install the ASP.NET MVC NuGet Package

To add Syncfusion® ASP.NET MVC 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.MVC5 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.MVC5 -Version 33.2.3

NOTE

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

Add the Namespace

Add the Syncfusion.EJ2 namespace reference in the Web.config file available in the Views folder.

<namespaces>
    <add namespace="Syncfusion.EJ2" />
</namespaces>

Add Script Resources

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

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

NOTE

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

Register the Syncfusion® Script Manager

Register the script manager EJS().ScriptManager() at the end of the <body> element in the ~/Views/Shared/_Layout.cshtml file as follows.

<body>
    ...
    <!-- Syncfusion ASP.NET MVC Script Manager -->
    @Html.EJS().ScriptManager()
</body>

Add the ASP.NET MVC Maps Control

Add the Syncfusion® ASP.NET MVC Maps control to the ~/Views/Home/Index.cshtml page.

@Html.EJS().Maps("container").Layers(layer =>
{
    layer.ShapeData(Model).Add();
}).Render()

Place the WorldMap.json file in the App_Data folder of the project. Read the content of the WorldMap.json file in the controller and assign the deserialized object to the ShapeData property of the Maps control as shown below.

public ActionResult Index()
{
    return View(GetWorldMap());
}

public object GetWorldMap()
{
    string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
    return JsonConvert.DeserializeObject(allText, typeof(object));
}

NOTE

Map layers render only when ShapeData is provided here.

Press Ctrl+F5 on (Windows) or ⌘ + F5 on (macOS) to run the application. The Syncfusion® ASP.NET MVC Maps control will be rendered in the default web browser.

ASP.NET MVC - Essential JS2 Maps

NOTE

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

See Also