Vector Map ▸ Custom Projection

@(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 System.Text.Json;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class VectorMapController : Controller {

        public ActionResult CustomProjection() {
            return View();
        }

    }
}

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;
}