Your search did not match any results.

Vector Map - Custom Projection

This demo illustrates how to implement a custom projection. To do it, set the aspectRatio, to, and from properties. The Wagner-VI projection is used in this example.

www.wikipedia.org
Backend API
@(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="~/data/customProjection.js"></script>
using Microsoft.AspNetCore.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; namespace DevExtreme.NETCore.Demos.Controllers { public class VectorMapController : Controller { public ActionResult CustomProjection() { return View(); } [HttpGet] public object GetCoordLinesData() { return SampleData.GetCoordLinesData(); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class CoordLines { public string type { get; set; } public IEnumerable<object> features { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.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; 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 { height: 400px; }