$(() => {
const map = $('#vector-map').dxVectorMap({
layers: {
dataSource: DevExpress.viz.map.sources.world,
},
bounds: [-180, 85, 180, -60],
onZoomFactorChanged(e) {
zoomFactor.option('value', e.zoomFactor.toFixed(2));
},
onCenterChanged(e) {
center.option('value', `${e.center[0].toFixed(3)
}, ${e.center[1].toFixed(3)}`);
},
}).dxVectorMap('instance');
$('#switchPan').dxSwitch({
value: true,
onValueChanged: (e) => map.option('controlBar.panVisible', e.value),
});
$('#switchZoom').dxSwitch({
value: true,
onValueChanged: (e) => map.option('controlBar.zoomVisible', e.value),
});
$('#choose-continent').dxSelectBox({
dataSource: viewportCoordinates,
width: 210,
displayExpr: 'continent',
valueExpr: 'coordinates',
value: viewportCoordinates[0].coordinates,
inputAttr: { 'aria-label': 'Continent' },
onValueChanged(data) {
map.viewport(data.value);
},
});
const zoomFactor = $('#zoom-factor').dxTextBox({
width: 210,
readOnly: true,
inputAttr: { 'aria-label': 'Zoom' },
value: '1.00',
}).dxTextBox('instance');
const center = $('#center').dxTextBox({
width: 210,
readOnly: true,
inputAttr: { 'aria-label': 'Center' },
value: '0.000, 46.036',
}).dxTextBox('instance');
});
<!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/23.1.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></script>
<script src="https://cdn3.devexpress.com/jslib/23.1.5/js/vectormap-data/world.js"></script>
<script src="https://cdn3.devexpress.com/jslib/23.1.5/js/vectormap-data/africa.js"></script>
<script src="https://cdn3.devexpress.com/jslib/23.1.5/js/vectormap-data/canada.js"></script>
<script src="https://cdn3.devexpress.com/jslib/23.1.5/js/vectormap-data/eurasia.js"></script>
<script src="https://cdn3.devexpress.com/jslib/23.1.5/js/vectormap-data/europe.js"></script>
<script src="https://cdn3.devexpress.com/jslib/23.1.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 class="options">
<div class="caption">Options</div>
<div class="wrapper-option">
<div class="column">
<div class="option">
<span>Continent</span>
<div id="choose-continent"></div>
</div>
<div class="option">
<span>Zoom factor</span>
<div id="zoom-factor"></div>
</div>
<div class="option">
<span>Center</span>
<div id="center"></div>
</div>
</div>
<div class="column">
<div class="option">
<span>Pan control</span>
<div id="switchPan"></div>
</div>
<div class="option">
<span>Zoom bar</span>
<div id="switchZoom"></div>
</div>
</div>
</div>
</div>
</div>
</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;
}
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],
}];