Backend API
import React, { useCallback, useRef, useState } from 'react';
import VectorMap, { Layer, ControlBar } from 'devextreme-react/vector-map';
import TextBox from 'devextreme-react/text-box';
import SelectBox from 'devextreme-react/select-box';
import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
import Switch from 'devextreme-react/switch';
import type { VectorMapTypes, VectorMapRef } from 'devextreme-react/vector-map';
import type { SelectBoxTypes } from 'devextreme-react/select-box';
import {
viewportCoordinates, centerLabel, zoomLabel, continentLabel,
} from './data.ts';
const bounds = [-180, 85, 180, -60];
const App = () => {
const [coordinates, setCoordinates] = useState(viewportCoordinates[0].coordinates);
const [zoomFactor, setZoomFactor] = useState('1.00');
const [center, setCenter] = useState('0.000, 46.036');
const [panVisible, setPanVisible] = useState(true);
const [zoomVisible, setZoomVisible] = useState(true);
const mapRef = useRef<VectorMapRef>(null);
const continentChanged = useCallback(({ value }: SelectBoxTypes.ValueChangedEvent) => {
setCoordinates(value);
mapRef.current?.instance().viewport(value);
}, []);
const zoomFactorChanged = useCallback((e: VectorMapTypes.ZoomFactorChangedEvent) => {
setZoomFactor(e.zoomFactor.toFixed(2));
}, []);
const centerChanged = useCallback((e: VectorMapTypes.CenterChangedEvent) => {
const value = `${e.center[0].toFixed(3)}, ${e.center[1].toFixed(3)}`;
setCenter(value);
}, []);
const panVisibleChange = useCallback((value: boolean) => {
setPanVisible(value);
}, []);
const zoomVisibleChange = useCallback((value: boolean) => {
setZoomVisible(value);
}, []);
return (
<div>
<VectorMap
id="vector-map"
bounds={bounds}
ref={mapRef}
onZoomFactorChanged={zoomFactorChanged}
onCenterChanged={centerChanged}
>
<ControlBar zoomVisible={zoomVisible} panVisible={panVisible} />
<Layer dataSource={mapsData.world} />
</VectorMap>
<div className="options">
<div className="caption">Options</div>
<div className="wrapper-option">
<div className="column">
<div className="option">
<span>Continent</span>
<SelectBox
dataSource={viewportCoordinates}
displayExpr="continent"
valueExpr="coordinates"
inputAttr={continentLabel}
value={coordinates}
onValueChanged={continentChanged}
width={210}
/>
</div>
<div className="option">
<span>Zoom factor</span>
<TextBox
value={zoomFactor}
inputAttr={zoomLabel}
readOnly={true}
width={210}
/>
</div>
<div className="option">
<span>Center</span>
<TextBox
value={center}
readOnly={true}
inputAttr={centerLabel}
width={210}
/>
</div>
</div>
<div className="column">
<div className="option">
<span>Pan control</span>
<Switch
value={panVisible}
onValueChange={panVisibleChange}
/>
</div>
<div className="option">
<span>Zoom bar</span>
<Switch
value={zoomVisible}
onValueChange={zoomVisibleChange}
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default App;
import React, { useCallback, useRef, useState } from 'react';
import VectorMap, { Layer, ControlBar } from 'devextreme-react/vector-map';
import TextBox from 'devextreme-react/text-box';
import SelectBox from 'devextreme-react/select-box';
import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
import Switch from 'devextreme-react/switch';
import {
viewportCoordinates, centerLabel, zoomLabel, continentLabel,
} from './data.js';
const bounds = [-180, 85, 180, -60];
const App = () => {
const [coordinates, setCoordinates] = useState(viewportCoordinates[0].coordinates);
const [zoomFactor, setZoomFactor] = useState('1.00');
const [center, setCenter] = useState('0.000, 46.036');
const [panVisible, setPanVisible] = useState(true);
const [zoomVisible, setZoomVisible] = useState(true);
const mapRef = useRef(null);
const continentChanged = useCallback(({ value }) => {
setCoordinates(value);
mapRef.current?.instance().viewport(value);
}, []);
const zoomFactorChanged = useCallback((e) => {
setZoomFactor(e.zoomFactor.toFixed(2));
}, []);
const centerChanged = useCallback((e) => {
const value = `${e.center[0].toFixed(3)}, ${e.center[1].toFixed(3)}`;
setCenter(value);
}, []);
const panVisibleChange = useCallback((value) => {
setPanVisible(value);
}, []);
const zoomVisibleChange = useCallback((value) => {
setZoomVisible(value);
}, []);
return (
<div>
<VectorMap
id="vector-map"
bounds={bounds}
ref={mapRef}
onZoomFactorChanged={zoomFactorChanged}
onCenterChanged={centerChanged}
>
<ControlBar
zoomVisible={zoomVisible}
panVisible={panVisible}
/>
<Layer dataSource={mapsData.world} />
</VectorMap>
<div className="options">
<div className="caption">Options</div>
<div className="wrapper-option">
<div className="column">
<div className="option">
<span>Continent</span>
<SelectBox
dataSource={viewportCoordinates}
displayExpr="continent"
valueExpr="coordinates"
inputAttr={continentLabel}
value={coordinates}
onValueChanged={continentChanged}
width={210}
/>
</div>
<div className="option">
<span>Zoom factor</span>
<TextBox
value={zoomFactor}
inputAttr={zoomLabel}
readOnly={true}
width={210}
/>
</div>
<div className="option">
<span>Center</span>
<TextBox
value={center}
readOnly={true}
inputAttr={centerLabel}
width={210}
/>
</div>
</div>
<div className="column">
<div className="option">
<span>Pan control</span>
<Switch
value={panVisible}
onValueChange={panVisibleChange}
/>
</div>
<div className="option">
<span>Zoom bar</span>
<Switch
value={zoomVisible}
onValueChange={zoomVisibleChange}
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
export const viewportCoordinates = [{
continent: 'all',
coordinates: 'null',
}, {
continent: 'NorthAmerica',
coordinates: [-180, 84.52, -22.11, -1.57],
}, {
continent: 'SouthAmerica',
coordinates: [-112.47, 14.26, -27.52, -57.44],
}, {
continent: 'Africa',
coordinates: [-29.34, 39.09, 55.60, -39.00],
}, {
continent: 'Europe',
coordinates: [-2.35, 70.91, 61.35, 35.84],
}, {
continent: 'Asia',
coordinates: [27.62, 83.11, 180, -19.36],
}, {
continent: 'Australia',
coordinates: [104.87, -6.61, 149.98, -45.87],
}];
export const centerLabel = { 'aria-label': 'Center' };
export const zoomLabel = { 'aria-label': 'Zoom' };
export const continentLabel = { 'aria-label': 'Continent' };
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 viewportCoordinates = [
{
continent: 'all',
coordinates: 'null',
},
{
continent: 'NorthAmerica',
coordinates: [-180, 84.52, -22.11, -1.57],
},
{
continent: 'SouthAmerica',
coordinates: [-112.47, 14.26, -27.52, -57.44],
},
{
continent: 'Africa',
coordinates: [-29.34, 39.09, 55.6, -39.0],
},
{
continent: 'Europe',
coordinates: [-2.35, 70.91, 61.35, 35.84],
},
{
continent: 'Asia',
coordinates: [27.62, 83.11, 180, -19.36],
},
{
continent: 'Australia',
coordinates: [104.87, -6.61, 149.98, -45.87],
},
];
export const centerLabel = { 'aria-label': 'Center' };
export const zoomLabel = { 'aria-label': 'Zoom' };
export const continentLabel = { 'aria-label': 'Continent' };
<!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: 420px;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.wrapper-option {
display: flex;
gap: 24px;
padding-top: 16px;
}
.column {
display: flex;
gap: 10px;
flex-direction: column;
}
.option {
display: flex;
align-items: center;
min-height: 34px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option > span {
width: 140px;
}
To show or hide the control bar, enable or disable the panVisible and zoomVisible properties. You can toggle switches under the map to see how these settings affect the control bar.