ASP.NET Core
Demos
Support
Forum
Download
Search results

Navigation Lines in ASP.NET Core Maps control

Navigation lines are used to denote the path between the two locations. You can use this feature to draw the navigation lines for flight, train or sea routes.

The following example shows rendering the path between two locations using latitudes and longitudes.

You can customize the navigation line color, dashArray, width and angle by modifying their default values in navigationLineSettings.

Refer to the following code sample to navigate the line between two cities in World map. Provide two locations latitude and longitude values to navigationLineSettings.

tagHelper
navigation-line.cs
@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps"  load="window.onMapLoad">
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.worldmap">
            </e-maps-layer>
        </e-maps-layers>
    </ejs-maps>
</div>
<script>
    function onMapLoad(args) {
        args.maps.layers[0].navigationLineSettings = [
            {
                visible: true,
                latitude: [40.7128, 36.7783],
                longitude: [-74.0060, -119.4179],
                color: 'black',
                angle: 90,
                width: 2,
                dashArray: '4'
            }
        ];
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Enabling the arrows

You can enable the arrows in the navigation line using arrowSettings.showArrow API, also you can customize following properties in arrow

  • color - Specifies the color of the arrow
  • offset - Specifies the arrow’s offset position
  • position - Specifies the arrow position to start or end line
  • size - Specifies the arrow size in pixel
tagHelper
arrow.cs
@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps"  load="window.onMapLoad">
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.worldmap">
            </e-maps-layer>
        </e-maps-layers>
    </ejs-maps>
</div>
<script>
    function onMapLoad(args) {
        args.maps.layers[0].navigationLineSettings = [
            {
                visible: true,
                latitude: [40.7128, 36.7783],
                longitude: [-74.0060, -119.4179],
                color: 'black',
                angle: 90,
                width: 2,
                dashArray: '4',
                arrowSettings:{
                    showArrow: true,
                    size: 15,
                    position: 'Start'
                } 
            }
        ];
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Refer to the API for Navigation Lines feature.

Previous
Next