var app = angular.module('map.directives', []);
app.controller('MapController', function($scope,$location,$http){
$scope.name = 'Misysboard';
$scope.data = function(result){
$http({method: 'GET', url: 'data.json'}).success(function(result){
result.data
$scope.mapdata = result
})
}
})
app.directive('mapComponent', function() {
return {
restrict: 'EAC',
link: function(scope, element, attrs) {
scope.$watch("mapdata" , function(n,o){
$(element).width('auto')
$(element).height(600)
$(element).vectorMap({
backgroundColor: 'transparent',
regionStyle: {
initial: {
fill: '#cccccc'
}
},
series: {
regions: [{
values: scope.mapdata,
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'
}]
},
});
});
}
};
});
<!DOCTYPE html>
<html ng-app="map.directives">
<head>
<meta charset="utf-8" />
<title>Misysboard Map Control</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="http://jvectormap.com/js/jquery-1.8.2.min.js"></script>
<script src="http://jvectormap.com/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="http://jvectormap.com/js/jquery-jvectormap-world-mill-en.js"></script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5"></script>
<script src="mapComponent.js"></script>
</head>
<body ng-controller="MapController">
<p>Hello {{name}}!</p><button ng-click="data()">Data</button>
<div mapComponent></div>
</body>
</html>
/* Put your css in here */
{"US":23,"IT":56}