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.

JavaScript
  • $(function() {
  • $("#mapContainer").dxMap({
  • zoom: 5,
  • routes: [{
  • locations: [
  • { lat: 40.782500, lng: -73.966111 },
  • "40.755833, -73.986389",
  • [ 40.753889, -73.981389 ],
  • "Brooklyn Bridge,New York,NY"
  • ]
  • }]
  • });
  • });

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).

See Also