JavaScript
Demos
Support
Forum
Download
Search results

Navigation Lines

Navigation lines are used to denote the path between the two locations. We can use this feature as flight or train or sea routes.

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

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

Refer the below code snippet to navigate line between two cities in World map. Import usmap geo json data from world_map.ts file. Import the NavigationLine Module and Inject into the Maps using Maps.Inject(NavigationLine). Provide two locations latitude and longitude values to navigationLineSettings.

Source
Preview
index.ts
index.html
index.css
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="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
    <script src="systemjs.config.js"></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

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
Source
Preview
index.ts
index.html
index.css
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',
            arrowSettins: {
                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="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>
</body>

</html>

Refer the API for Navigation Lines feature.

Previous
Next