DevExtreme React - 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.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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;
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 option of the Map widget to a component property.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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
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.