Angular Map - Add and Remove
To add routes at design-time, pass an array of objects to the routes property. A route requires only its locations to be specified. The locations will be connected and make up the route.
HTML
TypeScript
- <dx-map
- [zoom]="5"
- [routes]="mapRoutes">
- </dx-map>
- import { DxMapModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- mapRoutes = [{
- locations: [
- { lat: 40.782500, lng: -73.966111 },
- "40.755833, -73.986389",
- [ 40.753889, -73.981389 ],
- "Brooklyn Bridge,New York,NY"
- ]
- }];
- }
- @NgModule({
- imports: [
- // ...
- DxMapModule
- ],
- // ...
- })
To add or remove a route at runtime, bind the routes property of the Map to a component property.
HTML
TypeScript
- <dx-map
- [zoom]="10"
- [routes]="mapRoutes">
- </dx-map>
- <dx-button
- text="Add the Route"
- (onClick)="addRoute()">
- </dx-button>
- <dx-button
- text="Remove the Route"
- (onClick)="removeRoute()">
- </dx-button>
- import { DxMapModule, DxButtonModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- mapRoutes = [{
- locations: [
- "40.782500, -73.966111",
- "40.755833, -73.986389"
- ]
- }];
- addRoute () {
- this.mapRoutes.push({
- locations: [
- "40.753889, -73.981389",
- "Brooklyn Bridge,New York,NY"
- ]
- });
- };
- removeRoute () {
- this.mapRoutes.pop();
- }
- }
- @NgModule({
- imports: [
- // ...
- DxMapModule,
- DxButtonModule
- ],
- // ...
- })
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.