Map ▸ Routes

The Map component can display routes on the map. The collection of displayed routes is declared in the routes array. You can use the mode property to specify whether a route is for driving or walking.

[note] When copying this demo to CodeSandbox, specify your own apiKey. Our demo keys can be used only on our website.

Options

Set mode

Route color

@(Html.DevExtreme().Map()
    .ID("map")
    .Provider(GeoMapProvider.Azure)
    .ApiKey(k => k.Azure("6N8zuPkBsnfwniNAJkldM3cUgm3lXg3y9gkIKy59benICnnepK4DJQQJ99AIACYeBjFllM6LAAAgAZMPGFXE"))
    .Zoom(14)
    .Height(440)
    .Width("100%")
    .Controls(true)
    .Markers(markers => {
        markers.Add().Address("40.782500, -73.966111");
        markers.Add().Address("40.755833, -73.986389");
        markers.Add().Coordinates(40.753889, -73.981389);
        markers.Add().Address("City Hall Park,New York,NY");
    })
    .Routes(routes => {
        routes.Add().Weight(6)
            .Color("blue")
            .Opacity(0.5)
            .Mode(GeoMapRouteMode.Driving)
            .Locations(location => {
                location.Add().Coordinates(40.782500, -73.966111);
                location.Add().Coordinates(40.755833, -73.986389);
                location.Add().Coordinates(40.753889, -73.981389);
                location.Add().Address("City Hall Park,New York,NY");
            });
    })
)

<div class="options">
    <div class="caption">Options</div>
    <div class="option">
        <span>Set mode</span>
        @(Html.DevExtreme().SelectBox()
            .ID("choose-mode")
            .InputAttr("aria-label", "Mode")
            .DataSource(new[] { "driving", "walking" })
            .Value("driving")
            .OnValueChanged("chooseMode_valueChanged")
        )
    </div>
    <div class="option">
        <span>Route color</span>
        @(Html.DevExtreme().SelectBox()
            .ID("choose-color")
            .InputAttr("aria-label", "Color")
            .DataSource(new[] { "blue", "green", "red" })
            .Value("blue")
            .OnValueChanged("chooseColor_valueChanged")
        )
    </div>
</div>

<script>
    function getMap() {
        return $("#map").dxMap("instance");
    }

    function chooseMode_valueChanged(data) {
        getMap().option("routes", [$.extend({}, getMap().option("routes")[0], {
            mode: data.value
        })]);
    }

    function chooseColor_valueChanged(data) {
        getMap().option("routes", [$.extend({}, getMap().option("routes")[0], {
            color: data.value
        })]);
    }
</script>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class MapController : Controller {

        public ActionResult Routes() {
            return View();
        }

    }
}

.options {
    padding: 20px;
    background-color: rgba(191, 191, 191, 0.15);
    margin-top: 20px;
}

.caption {
    font-size: 18px;
    font-weight: 500;
}

.option {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.option > span {
    display: inline-block;
    width: 90px;
}

.option > .dx-selectbox {
    width: 100%;
    max-width: 350px;
    display: inline-block;
    vertical-align: middle;
}