@(Html.DevExtreme().VectorMap()
.ID("vector-map")
.Tooltip(t => t
.Enabled(true)
.CustomizeTooltip("vectorMap_customizeTooltip")
)
.OnClick("vectorMap_onClick")
.Bounds(new double[] { -180, 85, 180, -60 })
.Layers(layers => {
layers.Add()
.DataSource(new JS("DevExpress.viz.map.sources.world"))
.HoverEnabled(false);
layers.Add()
.DataSource(d => d.Mvc().LoadAction("GetMarkersForZoommingAndCentering"))
.DataSourceOptions(dso => dso.Map("vectorMap_layer_dataSource_map"));
})
)
@(Html.DevExtreme().Button()
.ID("reset")
.Text("Reset")
.OnClick("button_onClick")
)
<script>
function vectorMap_customizeTooltip(arg) {
if(arg.layer.type === "marker") {
return { text: arg.attribute("Name") };
}
}
function vectorMap_onClick(e) {
if(e.target && e.target.layer.type === "marker") {
e.component.center(e.target.coordinates()).zoomFactor(10);
}
}
function vectorMap_layer_dataSource_map(item) {
return {
coordinates: item.Coordinates,
attributes: item.Attributes
};
}
function button_onClick() {
$("#vector-map").dxVectorMap("instance").center(null).zoomFactor(null);
}
</script>
using DevExtreme.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class VectorMapController : Controller {
public ActionResult ZoomingAndCentering() {
return View();
}
[HttpGet]
public ContentResult GetMarkersForZoommingAndCentering() {
return Content(JsonConvert.SerializeObject(SampleData.VectorMapMarkerData), "application/json");
}
}
}
namespace DevExtreme.MVC.Demos.Models {
public class MarkerAttribute {
public string Name { get; set; }
}
}
namespace DevExtreme.MVC.Demos.Models {
public class VectorMapMarker {
public double[] Coordinates { get; set; }
public MarkerAttribute Attributes { get; set; }
}
}
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<VectorMapMarker> VectorMapMarkerData = new[] {
new VectorMapMarker() {
Coordinates = new[] { -0.1262, 51.5002 },
Attributes = new MarkerAttribute() {
Name = "London"
}
},
new VectorMapMarker() {
Coordinates = new[] { 149.1286, -35.2820 },
Attributes = new MarkerAttribute() {
Name = "Canberra"
}
},
new VectorMapMarker() {
Coordinates = new[] { 139.6823, 35.6785 },
Attributes = new MarkerAttribute() {
Name = "Tokyo"
}
},
new VectorMapMarker() {
Coordinates = new[] { -77.0241, 38.8921 },
Attributes = new MarkerAttribute() {
Name = "Washington"
}
},
new VectorMapMarker() {
Coordinates = new[] { -75.6794, 45.4214 },
Attributes = new MarkerAttribute() {
Name = "Ottawa"
}
},
new VectorMapMarker() {
Coordinates = new[] { 37.617778, 55.751667 },
Attributes = new MarkerAttribute() {
Name = "Moscow"
}
},
new VectorMapMarker() {
Coordinates = new[] { 116.4, 39.933333 },
Attributes = new MarkerAttribute() {
Name = "Beijing"
}
},
new VectorMapMarker() {
Coordinates = new[] { 12.5, 41.9 },
Attributes = new MarkerAttribute() {
Name = "Rome"
}
},
new VectorMapMarker() {
Coordinates = new[] { 23.716667, 38 },
Attributes = new MarkerAttribute() {
Name = "Athens"
}
},
new VectorMapMarker() {
Coordinates = new[] { 2.333333, 48.833333 },
Attributes = new MarkerAttribute() {
Name = "Paris"
}
},
new VectorMapMarker() {
Coordinates = new[] { -3.683333, 40.4 },
Attributes = new MarkerAttribute() {
Name = "Madrid"
}
},
new VectorMapMarker() {
Coordinates = new[] { -47.866667, -15.798889 },
Attributes = new MarkerAttribute() {
Name = "Brasilia"
}
}
};
}
}
#vector-map {
height: 420px;
}
#reset {
margin: 10px 2px;
}