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.

Backend API

@(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; }