@(Html.DevExtreme().Map()
.ID("map")
.Provider(GeoMapProvider.Bing)
.ApiKey(k => k.Bing("Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC"))
.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("Brooklyn Bridge,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("Brooklyn Bridge,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;
}