All docs
V20.2
21.1 (CTP)
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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.

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 property of the Map UI component 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