All docs
V20.2
21.1
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.

Customize

The route configuration provides default route appearance and allows its customization. For example, you can change the color, opacity and thickness of the route line. In addition, you can specify whether a route is for driving or for walking.

jQuery
JavaScript
$(function() {
    $("#mapContainer").dxMap({
        center: { lat: 40.749825, lng: -73.987963 },
        zoom: 15,
        routes: [{
            locations: [
                [40.782500, -73.966111],
                [40.755833, -73.986389]
            ],
            color: 'red',
            opacity: 1
        }, {
            locations: [
                [40.753889, -73.981389],
                "Brooklyn Bridge,New York,NY"
            ],
            mode: 'walking', // or 'driving'
            weight: 2
        }]
    });
});
Angular
HTML
TypeScript
<dx-map
    [center]="{ lat: 40.749825, lng: -73.987963 }"
    [zoom]="15"
    [routes]="mapRoutes">
</dx-map>
import { DxMapModule } from "devextreme-angular";
// ...
export class AppComponent {
    mapRoutes = [{
        locations: [
            [40.782500, -73.966111],
            [40.755833, -73.986389]
        ],
        color: "red",
        opacity: 1
    }, {
        locations: [
            [40.753889, -73.981389],
            "Brooklyn Bridge,New York,NY"
        ],
        mode: "walking", // or "driving"
        weight: 2
    }];
}
@NgModule({
    imports: [
        // ...
        DxMapModule
    ],
    // ...
})
Vue
<template>
    <DxMap
        :zoom="15"
        :center="centerCoordinates"
        :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 {
            centerCoordinates: { lat: 40.749825, lng: -73.987963 },
            mapRoutes: [{
                locations: [
                    [40.782500, -73.966111],
                    [40.755833, -73.986389]
                ],
                color: "red",
                opacity: 1
            }, {
                locations: [
                    [40.753889, -73.981389],
                    "Brooklyn Bridge,New York,NY"
                ],
                mode: "walking", // or "driving"
                weight: 2
            }]
        };
    }
}
</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 centerCoordinates = { lat: 40.749825, lng: -73.987963 };
const mapRoutes = [{
    locations: [
        [40.782500, -73.966111],
        [40.755833, -73.986389]
    ],
    color: "red",
    opacity: 1
}, {
    locations: [
        [40.753889, -73.981389],
        "Brooklyn Bridge,New York,NY"
    ],
    mode: "walking", // or "driving"
    weight: 2
}];

class App extends React.Component {
    render() {
        return (
            <Map
                defaultZoom={15}
                defaultCenter={centerCoordinates}
                routes={mapRoutes}
            />
        );
    }
}

export default App;
See Also