How to add a navigation line dynamically in ASP.NET MVC Maps?

ASP.NET MVC Maps can display a navigation line to represent the distance between two points on a map. In this section, we’ll show you how to add a navigation line to Maps dynamically on a button click.

In your application, you can include a button that allows you to add a navigation line. To add a navigation line dynamically in the Maps, update the navigationLineSettings property in the layers of the Maps component and call the refresh method of the Maps during the button click event.

The following code sample shows how to dynamically add a navigation line in ASP.NET MVC Maps.

Index.cshtml

@Html.EJS().Button("togglebtn").Content("Add NavigationLine").IsPrimary(true).Render()

@(Html.EJS().Maps("container")

        .Layers(layers =>

        {

            layers.ShapeData(ViewBag.shapeData).Add();

        })

        .ZoomSettings(settings =>

        {

            settings.Enable(true);

            settings.MinZoom(1);

            settings.MaxZoom(20);

            settings.MouseWheelZoom(true);

        })

        .Render())

HomeController.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.shapeData = this.GetWorldMap();
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

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

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

The following screenshot illustrates the output of the above code snippet.

Screenshot of the initial rendering of the Maps:

Screenshot after dynamically adding a navigation line on button click:

View the sample in GitHub

Conclusion

I hope you enjoyed learning how to add a navigation line dynamically in ASP.NET MVC Maps component.

You can refer to our ASP.NET MVC Maps feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Maps example to understand how to create and visualize data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!