var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.zoomFactorValue = "1.00";
$scope.centerValue = "0.000, 46.036";
$scope.vectorMapOptions = {
layers: {
dataSource: DevExpress.viz.map.sources.world
},
bounds: [-180, 85, 180, -60],
onZoomFactorChanged: function (e) {
$scope.zoomFactorValue = e.zoomFactor.toFixed(2);
},
onCenterChanged: function (e) {
$scope.centerValue = e.center[0].toFixed(3) +
", " + e.center[1].toFixed(3);
}
};
$scope.chooseContinent = {
dataSource: viewportCoordinates,
width: 210,
displayExpr: "continent",
valueExpr: "coordinates",
value: viewportCoordinates[0].coordinates,
onValueChanged: function (data) {
$("#vector-map").dxVectorMap("instance").viewport(data.value);
}
};
$scope.zoomFactor = {
bindingOptions: {
value: "zoomFactorValue"
},
readOnly: true,
width: 210
};
$scope.center = {
bindingOptions: {
value: "centerValue"
},
readOnly: true,
width: 210
};
});
<!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://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<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" ng-app="DemoApp" ng-controller="DemoController">
<div id="vector-map" dx-vector-map="vectorMapOptions"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Continent</span>
<div dx-select-box="chooseContinent"></div>
</div>
<div class="option">
<span>Zoom factor</span>
<div dx-text-box="zoomFactor"></div>
</div>
<div class="option">
<span>Center</span>
<div dx-text-box="center"></div>
</div>
</div>
</div>
</body>
</html>
#vector-map {
height: 420px;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.option {
margin-top: 10px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option > span {
width: 140px;
display: inline-block;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}
var 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]
}];