DevExtreme v23.2 is now available.

Your search did not match any results.

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
<template> <DxVectorMap id="vector-map" :projection="customProjection" title="Wagner VI projection" > <DxLayer :data-source="world" /> <DxLayer :data-source="coordLinesData" :hover-enabled="false" :border-width="1" color="#aaa" /> <DxExport :enabled="true"/> </DxVectorMap> </template> <script setup lang="ts"> import { DxVectorMap, DxLayer, DxExport, } from 'devextreme-vue/vector-map'; import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import { coordLinesData } from './data.ts'; const world = mapsData.world; const RADIANS = Math.PI / 180; const WAGNER_6_P_LAT = Math.PI / Math.sqrt(3); const WAGNER_6_U_LAT = 2 / Math.sqrt(3) - 0.1; const customProjection = { aspectRatio: 2, to(coordinates) { const x = coordinates[0] * RADIANS; const y = Math.min(Math.max(coordinates[1] * RADIANS, -WAGNER_6_P_LAT), +WAGNER_6_P_LAT); const t = y / Math.PI; return [ (x / Math.PI) * Math.sqrt(1 - 3 * t * t), (y * 2) / Math.PI, ]; }, from(coordinates) { const x = coordinates[0]; const y = Math.min(Math.max(coordinates[1], -WAGNER_6_U_LAT), +WAGNER_6_U_LAT); const t = y / 2; return [ (x * Math.PI) / Math.sqrt(1 - 3 * t * t) / RADIANS, (y * Math.PI) / 2 / RADIANS, ]; }, }; </script> <style> #vector-map { height: 400px; } </style>