DevExtreme jQuery/JS - Add and Remove

To add routes at design-time, pass an array of objects to the routes option. 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
  • ],
  • // ...
  • })

View Demo

To add or remove a route at runtime, call the addRoute(routeOptions) or removeRoute(route) method.

JavaScript
  • var routesCollection = [{
  • locations: [
  • "40.753889, -73.981389",
  • "Brooklyn Bridge,New York,NY"
  • ]
  • }, {
  • locations: [
  • [40.8304282, -73.9455893],
  • [40.767693, -73.9962566],
  • [40.7198128, -74.0012278]
  • ]
  • }];
  •  
  • // Adds a route
  • map.addRoute(routesCollection[0]);
  •  
  • // Adds several routes
  • map.addRoute(routesCollection);
  •  
  • // Removes the route with specific configuration
  • map.removeRoute(routesCollection[0]);
  •  
  • // Removes the route with index 1 in the "routes" array
  • map.removeRoute(1);
  •  
  • // Removes the routes with specific configurations
  • map.removeRoute(routesCollection);
  •  
  • // Removes the routes with indexes 0 and 2 in the "routes" array
  • map.removeRoute([0, 2]);

With Angular, AngularJS, or Knockout, use a different technique. Bind the routes option of the Map widget to a component property (in Angular), a scope property (in AngularJS), or an observable array (in Knockout).

HTML
TypeScript
  • <dx-map
  • [zoom]="10"
  • [markers]="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