JavaScript/jQuery 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
  • ],
  • // ...
  • })

View Demo

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