React 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

TS JS

Backend API

import React from 'react'; import VectorMap, { Layer, Export, } from 'devextreme-react/vector-map'; import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import { coordLinesData } from './data.ts'; 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: number[]) { 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: number[]) { 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, ]; }, }; const App = () => ( <VectorMap id="vector-map" projection={customProjection} title="Wagner VI projection" > <Layer dataSource={mapsData.world} /> <Layer dataSource={coordLinesData} color="#aaa" borderWidth={1} hoverEnabled={false} /> <Export enabled={true}></Export> </VectorMap> ); export default App;

import React from 'react'; import VectorMap, { Layer, Export } from 'devextreme-react/vector-map'; import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import { coordLinesData } from './data.js'; 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]; }, }; const App = () => ( <VectorMap id="vector-map" projection={customProjection} title="Wagner VI projection" > <Layer dataSource={mapsData.world} /> <Layer dataSource={coordLinesData} color="#aaa" borderWidth={1} hoverEnabled={false} /> <Export enabled={true}></Export> </VectorMap> ); export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

interface LineFeature { geometry: { type: string; coordinates: number[][]; }; } export const coordLinesData = { type: 'FeatureCollection', features: [] as LineFeature[], }; // add meridians for (let longitude = -180; longitude <= 180; longitude += 30) { const lineCoords: number[][] = []; for (let latitude = -90; latitude <= 90; latitude += 5) { lineCoords.push([longitude, latitude]); } coordLinesData.features.push({ geometry: { type: 'LineString', coordinates: lineCoords, }, }); } // add parallels for (let latitude = -90; latitude <= 90; latitude += 30) { coordLinesData.features.push({ geometry: { type: 'LineString', coordinates: [[-180, latitude], [180, latitude]], }, }); }

declare module 'devextreme-dist/js/vectormap-data/world.js' { type Position = number[]; type Geometry = | { type: 'Point'; coordinates: Position } | { type: 'MultiPoint'; coordinates: Position[] } | { type: 'LineString'; coordinates: Position[] } | { type: 'MultiLineString'; coordinates: Position[][] } | { type: 'Polygon'; coordinates: Position[][] } | { type: 'MultiPolygon'; coordinates: Position[][][] }; interface Feature { type: 'Feature'; geometry: Geometry; properties: Record<string, unknown>; } interface FeatureCollection { type: 'FeatureCollection'; features: Feature[]; // eslint-disable-next-line spellcheck/spell-checker bbox?: number[]; } const world: FeatureCollection; export { world }; export default world; }

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const coordLinesData = { type: 'FeatureCollection', features: [], }; // add meridians for (let longitude = -180; longitude <= 180; longitude += 30) { const lineCoords = []; for (let latitude = -90; latitude <= 90; latitude += 5) { lineCoords.push([longitude, latitude]); } coordLinesData.features.push({ geometry: { type: 'LineString', coordinates: lineCoords, }, }); } // add parallels for (let latitude = -90; latitude <= 90; latitude += 30) { coordLinesData.features.push({ geometry: { type: 'LineString', coordinates: [ [-180, latitude], [180, latitude], ], }, }); }

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

#vector-map { height: 400px; }