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

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Map } from 'devextreme-react/map';
  •  
  • const mapRoutes = [{
  • locations: [
  • { lat: 40.782500, lng: -73.966111 },
  • "40.755833, -73.986389",
  • [ 40.753889, -73.981389 ],
  • "Brooklyn Bridge,New York,NY"
  • ]
  • }];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Map
  • defaultZoom={5}
  • routes={mapRoutes}
  • />
  • );
  • }
  • }
  •  
  • export default App;

View Demo

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

JavaScript
  • const 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, Vue, or React, use a different technique. Bind the routes property of the Map UI component to a component property.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Map } from 'devextreme-react/map';
  • import { Button } from 'devextreme-react/button';
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  •  
  • this.state = {
  • mapRoutes: [{
  • locations: [
  • { lat: 40.782500, lng: -73.966111 },
  • "40.755833, -73.986389",
  • [ 40.753889, -73.981389 ],
  • "Brooklyn Bridge,New York,NY"
  • ]
  • }]
  • };
  •  
  • this.addRoute = this.addRoute.bind(this);
  • this.removeRoute = this.removeRoute.bind(this);
  • }
  •  
  • addRoute() {
  • this.state.mapRoutes.push({
  • locations: [
  • "40.753889, -73.981389",
  • "Brooklyn Bridge,New York,NY"
  • ]
  • });
  • }
  •  
  • removeRoute() {
  • this.state.mapRoutes.pop();
  • }
  •  
  • render() {
  • return (
  • <div>
  • <Map
  • defaultZoom={10}
  • routes={this.state.mapRoutes}
  • />
  • <Button
  • text="Add the Route"
  • onClick={this.addRoute}
  • />
  • <Button
  • text="Remove the Route"
  • onClick={this.removeRoute}
  • />
  • </div>
  • );
  • }
  • }
  •  
  • export default App;
See Also