Navigation line in Vue Maps component

6 Feb 20267 minutes to read

Navigation lines are curved paths used to denote the route between two locations on the Maps. This feature is commonly used to draw flight routes, sea routes, or any path connecting two geographic points. Navigation lines are enabled by setting the visible property of the navigationLineSettings to true.

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 draw a navigation line between two cities on the world map, the latitude and longitude properties are used to specify the start and end points of the navigation line.

app.vue

<template>
    <div id="app">
          <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' >
                    <e-navigationLineSettings>
                    <e-navigationLineSetting visible = true :latitude ='latitude' :longitude ='longitude' :color ='color' :angle ='angle' :width="width" :dashArray='dashArray' >
                    </e-navigationLineSetting>
                    </e-navigationLineSettings>
                    </e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>

import { MapsComponent, NavigationLine, LayerDirective, LayersDirective, NavigationLineSettingDirective, NavigationLineSettingsDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';

export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective,
"e-navigationLineSettings":NavigationLineSettingsDirective,
"e-navigationLineSetting":NavigationLineSettingDirective
},
data () {
    return {
        shapeData: world_map,
        latitude: [40.7128, 36.7783],
        longitude: [-74.0060, -119.4179],
        color: 'black',
        angle: 90,
        width: 2,
        dashArray: '4'
    }
},
provide: {
    maps: [NavigationLine]
}
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

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 in the navigation lines.

• color - To apply the color for the arrow in the navigation line.
• offset - To customize the offset position of the arrow in the navigation line.
• position - To customize the position of the arrow in the navigation line. The possible values are Start and End.
• size - To customize the size of the arrow in pixels.

app.vue

<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' >
                    <e-navigationLineSettings>
                    <e-navigationLineSetting visible = true :latitude ='latitude' :longitude ='longitude' :color ='color' :angle ='angle' :width="width" :dashArray='dashArray' :arrowSettings = 'arrowSettings' >
                    </e-navigationLineSetting>
                    </e-navigationLineSettings>
                    </e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>

import { MapsComponent, NavigationLine, LayerDirective, LayersDirective, NavigationLineSettingDirective, NavigationLineSettingsDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';

export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective,
"e-navigationLineSettings":NavigationLineSettingsDirective,
"e-navigationLineSetting":NavigationLineSettingDirective
},
data () {
    return {
        latitude: [37.6276571, -14.2350],
        longitude: [-74.0060, -51.9253],
        color: 'black',
        angle: -180,
        width: 2,
        dashArray: '4',
        arrowSettings: {
            showArrow: true,
            size: 10,
            position: 'Start'
        },
        shapeData: world_map,
    }
},
provide: {
    maps: [NavigationLine]
}
}
</script>
<style>
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>