Search results
Navigation Lines in ASP.NET Core Maps control
20 Jan 2022 / 2 minutes to read
The navigation lines are used to denote the path between two locations. This feature can be used to draw flight or sea routes. Navigation lines are enabled by setting the Visible property of the MapsNavigationLine to true.
Customization
The following properties are available in MapsNavigationLine to customize the navigation line of the Maps component.
Color- To apply the color for navigation lines in Maps.DashArray- To define the pattern of dashes and gaps that is applied to the outline of the navigation lines.Width- To customize the width of the navigation lines.Angle- To customize the angle of the navigation lines.HighlightSettings- To customize the highlight settings of the navigation line.SelectionSettings- To customize the selection settings of the navigation line.
To navigate the line between two cities on the world map, Latitude and Longitude values are used to indicate the start and end points of navigation lines drawn on Maps.
tagHelper
navigation-line.cs
@using Syncfusion.EJ2.Maps;
@{
var latitude = new[] { 40.7128, 36.7783 };
var longitude = new[] { -74.0060, -119.4179 };
}
<ejs-maps id="maps">
<e-maps-layers>
<e-maps-layer shapeData="ViewBag.worldmap">
<e-layersettings-navigationlines>
<e-layersettings-navigationline visible="true" color="black" angle="90" width="2" dashArray="4"
latitude="latitude" longitude="longitude">
</e-layersettings-navigationline>
</e-layersettings-navigationlines>
</e-maps-layer>
</e-maps-layers>
</ejs-maps>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
To enable the arrow in the navigation line, set the ShowArrow property of MapsArrow to true. The following properties are available in MapsArrow to customize the arrow of the navigation lines.
Color- To apply the color for arrow of the navigation line.OffSet- To customize the offset position of the arrow of the navigation line.Position- To customize the position of the arrow in navigation line. The possible values can be Start and End.Size- To customize the size of the arrow in pixels.
tagHelper
arrow.cs
@using Syncfusion.EJ2.Maps;
@{
var latitude = new[] { 40.7128, 36.7783 };
var longitude = new[] { -74.0060, -119.4179 };
var arrow = new MapsArrow
{
ShowArrow= true,
Size= 15,
Position= "Start"
};
}
<ejs-maps id="maps">
<e-maps-layers>
<e-maps-layer shapeData="ViewBag.worldmap">
<e-layersettings-navigationlines>
<e-layersettings-navigationline visible="true" color="black" angle="90" width="2" dashArray="4"
latitude="latitude" longitude="longitude" arrowSettings="arrow">
</e-layersettings-navigationline>
</e-layersettings-navigationlines>
</e-maps-layer>
</e-maps-layers>
</ejs-maps>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);
}
}
}
Contents
Contents
Thank you for your feedback and comments.We will rectify this as soon as possible!