Navigation lines are used to denote the path between the two locations. We can use this feature as flight or train or sea routes.
You can customize the following properties in the navigation lines by modifying their default values in navigationlineSettings
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.ts file.
Import the NavigationLineService
and Inject into the Maps using NgModule providers
.
Provide two locations latitude and longitude values to navigationLineSettings
.
[app.component.ts
]
import { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import { Maps, NavigationLine } from '@syncfusion/ej2-angular-maps';
import { world_map } from 'world-map.ts';
Maps.Inject(NavigationLine);
@Component({
selector: 'app-container',
template:
`<ejs-maps id='rn-container' >
<e-layers>
<e-layer [shapeData]= 'shapeData' [navigationLineSettings] = 'navigationLineSettings' ></e-layer>
</e-layers>
</ejs-maps>`
})
export class AppComponent implements OnInit {
ngOnInit(): void {
public shapeData: Object = world_map;
public navigationLineSettings: object[] = [{
visible: true,
latitude: [37.6276571, -122.4276688],
longitude: [-74.0060, -117.7418381],
color: 'black',
angle: 90,
width: 2,
dashArray: '4'
}],
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { LegendService, MarkerService, MapsTooltipService, DataLabelService, BubbleService, NavigationLineService, SelectionService, AnnotationsService, ZoomService } from '@syncfusion/ej2-angular-maps';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, MapsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [LegendService, MarkerService, MapsTooltipService, DataLabelService, BubbleService, NavigationLineService , SelectionService, AnnotationsService, ZoomService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
[app.module.ts
]
Injecting NavigationLineService into NgModule.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the MapsModule for the Maps component
import { MapsModule, NavigationLineService} from '@syncfusion/ej2-angular-maps';
import { AppComponent } from './app.component';
@NgModule({
// declaration of ej2-angular-maps module into NgModule
imports: [ BrowserModule, MapsModule ],
declarations: [ AppComponent ],
providers: [NavigationLineService],
bootstrap: [ AppComponent ]
})
export class AppModule { }
You can enable the arrows in the navigation line using arrowSettings.showArrow
API, also you can customize following properties in arrow
start
or end
lineimport { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import { Maps, NavigationLine } from '@syncfusion/ej2-angular-maps';
import { world_map } from 'world-map.ts';
Maps.Inject(NavigationLine);
@Component({
selector: 'app-container',
template:
`<ejs-maps id='rn-container' >
<e-layers>
<e-layer [shapeData]= 'shapeData' [navigationLineSettings] = 'navigationLineSettings' ></e-layer>
</e-layers>
</ejs-maps>`
})
export class AppComponent implements OnInit {
ngOnInit(): void {
public shapeData: Object = world_map;
public navigationLineSettings: object[] = [{
visible: true,
latitude: [37.6276571, -122.4276688],
longitude: [-74.0060, -117.7418381],
color: 'black',
angle: 90,
width: 2,
dashArray: '4',
arrowSettings: {
showArrow: true,
size: 15,
position: 'Start'
}
}],
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { LegendService, MarkerService, MapsTooltipService, DataLabelService, BubbleService, NavigationLineService, SelectionService, AnnotationsService, ZoomService } from '@syncfusion/ej2-angular-maps';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, MapsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [LegendService, MarkerService, MapsTooltipService, DataLabelService, BubbleService, NavigationLineService , SelectionService, AnnotationsService, ZoomService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Refer the API
for Navigation Lines feature.