DevExtreme Angular - 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
    ],
    // ...
})
See Also