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.

jQuery
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"
            ]
        }]
    });
});
Angular
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
    ],
    // ...
})
Vue
<template>
    <DxMap
        :zoom="5"
        :routes="mapRoutes"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxMap } from 'devextreme-vue/map';

export default {
    components: {
        DxMap
    },
    data() {
        return {
            mapRoutes: [{
                locations: [
                    { lat: 40.782500, lng: -73.966111 },
                    "40.755833, -73.986389",
                    [ 40.753889, -73.981389 ],
                    "Brooklyn Bridge,New York,NY"
                ]
            }]
        };
    }
}
</script>
React
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;

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 option of the Map widget to a component property.

Angular
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
    ],
    // ...
})
Vue
<template>
    <div>
        <DxMap
            :zoom="10"
            :routes="mapRoutes"
        />
        <DxButton
            text="Add the Route"
            @click="addRoute"
        />
        <DxButton
            text="Remove the Route"
            @click="removeRoute"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxMap } from 'devextreme-vue/map';
import { DxButton } from 'devextreme-vue/button';

export default {
    components: {
        DxMap,
        DxButton
    },
    data() {
        return {
            mapRoutes: [{
                locations: [
                    { lat: 40.782500, lng: -73.966111 },
                    "40.755833, -73.986389",
                    [ 40.753889, -73.981389 ],
                    "Brooklyn Bridge,New York,NY"
                ]
            }]
        };
    },
    methods: {
        addRoute() {
            this.mapRoutes.push({
                locations: [
                    "40.753889, -73.981389",
                    "Brooklyn Bridge,New York,NY"
                ]
            });
        },
        removeRoute() {
            this.mapRoutes.pop();
        }
    }
}
</script>
React
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