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 world_map geo json data from world-map.ts file. Import the NavigationLine Module and Inject into the Maps using provide option. Provide two locations latitude and longitude values to navigationLineSettings.

Source
Preview
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 Vue from 'vue';
import { MapsPlugin, NavigationLine } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
    return{
            latitude: [37.6276571, -14.2350],
            longitude: [-74.0060, -51.9253],
            color: 'black',
            angle: -180,
            width: 2,
            dashArray: '4',
        shapeData: world_map,
    }
},
provide: {
    maps: [NavigationLine]
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-maps/styles/material.css";
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>