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.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

​x
 
@(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>​

xxxxxxxxxx
 
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();        }    }}

xxxxxxxxxx
 
.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;}