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