@model IEnumerable<DevExtreme.NETCore.Demos.Models.ViewportCoordinate>
@(Html.DevExtreme().VectorMap()
.ID("vector-map")
.Layers(l => l.Add().DataSource(new JS("DevExpress.viz.map.sources.world")))
.Bounds(new double[] { -180, 85, 180, -60 })
.OnZoomFactorChanged("vectorMap_onZoomFactorChanged")
.OnCenterChanged("vectorMap_onCenterChanged")
)
<div class="options">
<div class="caption">Options</div>
<div class="wrapper-option">
<div class="column">
<div class="option">
<span>Continent</span>
@(Html.DevExtreme().SelectBox()
.ID("choose-continent")
.DataSource(Model)
.Width(210)
.InputAttr("aria-label", "Continent")
.DisplayExpr("Continent")
.ValueExpr("Coordinates")
.Value(Model.First().Coordinates)
.OnValueChanged("selectBox_onValueChanged")
)
</div>
<div class="option">
<span>Zoom factor</span>
@(Html.DevExtreme().TextBox()
.ID("zoom-factor")
.Width(210)
.InputAttr("aria-label", "Zoom")
.ReadOnly(true)
.Value("1.00")
)
</div>
<div class="option">
<span>Center</span>
@(Html.DevExtreme().TextBox()
.ID("center")
.Width(210)
.ReadOnly(true)
.InputAttr("aria-label", "Center")
.Value("0.000, 46.036")
)
</div>
</div>
<div class="column">
<div class="option">
<span>Pan control</span>
@(Html.DevExtreme().Switch()
.OnValueChanged("switch_panVisible")
.Value(true)
)
</div>
<div class="option">
<span>Zoom bar</span>
@(Html.DevExtreme().Switch()
.OnValueChanged("switch_zoomVisible")
.Value(true)
)
</div>
</div>
</div>
</div>
<script>
function vectorMap_onZoomFactorChanged(e) {
$("#zoom-factor").dxTextBox("instance").option("value", e.zoomFactor.toFixed(2));
}
function vectorMap_onCenterChanged(e) {
$("#center").dxTextBox("instance").option("value", e.center[0].toFixed(3) +
", " + e.center[1].toFixed(3));
}
function selectBox_onValueChanged(data) {
$("#vector-map").dxVectorMap("instance").viewport(data.value);
}
function switch_panVisible(data) {
$("#vector-map").dxVectorMap("instance").option('controlBar.panVisible', data.value);
}
function switch_zoomVisible(data) {
$("#vector-map").dxVectorMap("instance").option('controlBar.zoomVisible', data.value);
}
</script>
using Microsoft.AspNetCore.Mvc;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Newtonsoft.Json;
namespace DevExtreme.NETCore.Demos.Controllers {
public class VectorMapController : Controller {
public ActionResult DynamicViewport() {
return View(SampleData.ViewportCoordinateData);
}
}
}
namespace DevExtreme.NETCore.Demos.Models {
public class ViewportCoordinate {
public string Continent { get; set; }
public object Coordinates { get; set; }
}
}
using System.Collections.Generic;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<ViewportCoordinate> ViewportCoordinateData = new[] {
new ViewportCoordinate() {
Continent = "all",
Coordinates = "null"
},
new ViewportCoordinate() {
Continent = "NorthAmerica",
Coordinates = new[] { -180, 84.52, -22.11, -1.57 }
},
new ViewportCoordinate() {
Continent = "SouthAmerica",
Coordinates = new[] { -112.47, 14.26, -27.52, -57.44 }
},
new ViewportCoordinate() {
Continent = "Africa",
Coordinates = new[] { -29.34, 39.09, 55.60, -39.00 }
},
new ViewportCoordinate() {
Continent = "Europe",
Coordinates = new[] { -2.35, 70.91, 61.35, 35.84 }
},
new ViewportCoordinate() {
Continent = "Asia",
Coordinates = new[] { 27.62, 83.11, 180, -19.36 }
},
new ViewportCoordinate() {
Continent = "Australia",
Coordinates = new[] { 104.87, -6.61, 149.98, -45.87 }
}
};
}
}
#vector-map {
height: 420px;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.wrapper-option {
display: flex;
gap: 24px;
padding-top: 16px;
}
.column {
display: flex;
gap: 10px;
flex-direction: column;
}
.option {
display: flex;
align-items: center;
min-height: 34px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option > span {
width: 140px;
}