Navigation line in EJ2 TypeScript Maps control
27 Apr 20237 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 navigationLineSettings
to true. To render the navigation line in Maps, NavigationLine Module must be injected into the Maps using the Maps.Inject(NavigationLine) method.
import { Maps, NavigationLine } from '@syncfusion/ej2-maps';
Maps.Inject(NavigationLine);
let map: Maps = new Maps({ });
Customization
The following properties are available in navigationLineSettings
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.
import { world_map } from './world-map.ts';
import { Maps, NavigationLine } from '@syncfusion/ej2-maps';
Maps.Inject(NavigationLine);
let map: Maps = new Maps({
layers: [{
navigationLineSettings: [{
visible: true,
latitude: [40.7128, 36.7783],
longitude: [-74.0060, -119.4179],
color: 'black',
angle: 90,
width: 2,
dashArray: '4'
}],
shapeData: world_map,
}]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>
Enabling the arrows
To enable the arrow in the navigation line, set the showArrow
property of arrowSettings
to true. The following properties are available in arrowSettings
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.
import { world_map } from './world-map.ts';
import { Maps, NavigationLine } from '@syncfusion/ej2-maps';
Maps.Inject(NavigationLine);
let map: Maps = new Maps({
layers: [{
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'
}
}],
shapeData: world_map,
}]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>