@(Html.DevExtreme().VectorMap()
.ID("vector-map")
.Projection(new JS("customProjection"))
.Title("Wagner VI projection")
.Export(e => e.Enabled(true))
.Layers(layers => {
layers.Add()
.DataSource(new JS("DevExpress.viz.map.sources.world"));
layers.Add()
.Color("#aaa")
.BorderWidth(1)
.HoverEnabled(false)
.DataSource(d => d.StaticJson().Url(Url.Action("GetCoordLinesData")));
})
)
<script src="~/Scripts/data/customProjection.js"></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 CustomProjection() {
return View();
}
[HttpGet]
public ContentResult GetCoordLinesData() {
return Content(JsonConvert.SerializeObject(SampleData.GetCoordLinesData()), "application/json");
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.Demos.Models {
public class CoordLines {
public string type { get; set; }
public IEnumerable<object> features { get; set; }
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static IEnumerable<CoordLines> GetCoordLinesData() {
var features = new List<object>();
//add meridians
for(int longitude = -180; longitude <= 180; longitude += 30) {
var lineCoords = new List<object>();
for(var latitude = -90; latitude <= 90; latitude += 5) {
lineCoords.Add(new[] {
longitude,
latitude
});
}
features.Add(new {
geometry = new {
type = "LineString",
coordinates = lineCoords
}
});
}
//add parallels
for(int latitude = -90; latitude <= 90; latitude += 30) {
features.Add(new {
geometry = new {
type = "LineString",
coordinates = new[] {
new[] { -180, latitude },
new[] { 180, latitude }
}
}
});
}
return new[] {
new CoordLines() {
type = "FeatureCollection",
features = features
}
};
}
}
}
var RADIANS = Math.PI/180,
WAGNER_6_P_LAT = Math.PI/Math.sqrt(3),
WAGNER_6_U_LAT = 2/Math.sqrt(3)-0.1;
var customProjection = {
aspectRatio: 2,
to: function(coordinates) {
var x = coordinates[0]*RADIANS,
y = Math.min(Math.max(coordinates[1]*RADIANS, -WAGNER_6_P_LAT), +WAGNER_6_P_LAT),
t = y/Math.PI;
return [
x/Math.PI*Math.sqrt(1-3*t*t),
y*2/Math.PI
];
},
from: function(coordinates) {
var x = coordinates[0],
y = Math.min(Math.max(coordinates[1], -WAGNER_6_U_LAT), +WAGNER_6_U_LAT),
t = y/2;
return [
x*Math.PI/Math.sqrt(1-3*t*t)/RADIANS,
y*Math.PI/2/RADIANS
];
}
};
#vector-map {
height: 400px;
}