Your search did not match any results.
VectorMap

Custom Projection

Documentation
This demo illustrates the use of custom projections in the VectorMap widget. Wagner-VI projection is used in this example.
www.wikipedia.org
@(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.Mvc() .Controller("VectorMap") .LoadAction("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 List<object> features { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static CoordLines GetCoordLinesData() { CoordLines result = new CoordLines() { type = "FeatureCollection", features = new List<object>() }; //add meridians for (int longitude = -180; longitude <= 180; longitude += 30) { List<object> lineCoords = new List<object>(); for (var latitude = -90; latitude <= 90; latitude += 5) { lineCoords.Add(new[] { longitude, latitude }); } result.features.Add(new { geometry = new { type = "LineString", coordinates = lineCoords } }); } //add parallels for (int latitude = -90; latitude <= 90; latitude += 30) { result.features.Add(new { geometry = new { type = "LineString", coordinates = new[] { new[] { -180, latitude }, new [] { 180, latitude } } } }); } return result; } } }
var RADIANS = Math.PI/180, WAGNER_6_P_LAT = Math.PI/Math.sqrt(3), WAGNER_6_U_LAT = 2/Math.sqrt(3)-0.1; DevExpress.viz.map.projection.add("wagner-6",DevExpress.viz.map.projection({ 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 ]; } })); var customProjection = DevExpress.viz.map.projection.get("wagner-6");
#vector-map { width: 100%; height: 400px; display: block; }