$(function(){
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").dxVectorMap({
projection: customProjection,
title: "Wagner VI projection",
"export": {
enabled: true
},
layers: [ {
dataSource: DevExpress.viz.map.sources.world
}, {
color: "#aaa",
borderWidth: 1,
hoverEnabled: false,
dataSource: coordLinesData
}]
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/dx.all.js"></script>
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/vectormap-data/world.js"></script>
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/vectormap-data/africa.js"></script>
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/vectormap-data/canada.js"></script>
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/vectormap-data/eurasia.js"></script>
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/vectormap-data/europe.js"></script>
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/vectormap-data/usa.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="vector-map"></div>
</div>
</body>
</html>
#vector-map {
height: 400px;
}
var coordLinesData = {
type: "FeatureCollection",
features: []
};
//add meridians
for (var longitude = -180; longitude <= 180; longitude += 30) {
var lineCoords = [];
for (var latitude = -90; latitude <= 90; latitude += 5) {
lineCoords.push([longitude, latitude]);
}
coordLinesData.features.push({
geometry: {
type: "LineString",
coordinates: lineCoords
}
});
}
//add parallels
for (var latitude = -90; latitude <= 90; latitude += 30) {
coordLinesData.features.push({
geometry: {
type: "LineString",
coordinates: [[ -180, latitude ], [ 180, latitude]]
}
});
}