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
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.