fixed map resize

public/js/directives.js

@@ -16,33 +16,45 @@ angular.module('netStatsApp.directives', []).
 				data: '='
 			},
 			link: function(scope, element, attrs) {
-				element.empty();
-
-				scope.map = new Datamap({
-					element: element[0],
-					scope: 'world',
-					responsive: true,
-					fills: {
-						success: '#7bcc3a',
-						info: '#10a0de',
-						warning: '#FFD162',
-						danger: '#F74B4B',
-						defaultFill: '#282828'
-					},
-					geographyConfig: {
-						borderWidth: 0,
-						borderColor: '#000',
-						highlightOnHover: false,
-						popupOnHover: false
-					},
-					bubblesConfig: {
+				scope.init = function() {
+					element.empty();
+
+					scope.map = new Datamap({
+						element: element[0],
+						scope: 'world',
+						responsive: true,
+						fills: {
+							success: '#7bcc3a',
+							info: '#10a0de',
+							warning: '#FFD162',
+							danger: '#F74B4B',
+							defaultFill: '#282828'
+						},
+						geographyConfig: {
+							borderWidth: 0,
+							borderColor: '#000',
+							highlightOnHover: false,
+							popupOnHover: false
+						},
+						bubblesConfig: {
+							borderWidth: 0,
+							popupOnHover: false,
+							highlightOnHover: false
+						}
+					});
+
+					scope.map.bubbles(scope.data, {
 						borderWidth: 0,
 						popupOnHover: false,
 						highlightOnHover: false
-					}
-				});
+					});
+				}
+
+				scope.init();
 
-				scope.map.bubbles(scope.data);
+				window.onresize = function() {
+					scope.$apply();
+				};
 
 				scope.$watch('data', function() {
 					scope.map.bubbles(scope.data, {
@@ -51,6 +63,12 @@ angular.module('netStatsApp.directives', []).
 						highlightOnHover: false
 					});
 				}, true);
+
+				scope.$watch(function() {
+					return angular.element(window)[0].innerWidth;
+				}, function() {
+					scope.init();
+				});
 			}
 		};
 	}]);

public/js/script.js

@@ -1,24 +1,4 @@
 (function() {
-	var mapHolder = document.getElementById('mapHolder');
-	mapHolder.clientHeight = mapHolder.clientWidth/2;
-
-	Datamap.prototype.resize = function () {
-		var self = this;
-		var options = self.options;
-		if (options.responsive) {
-			var prefix = '-webkit-transform' in document.body.style ? '-webkit-' : '-moz-transform' in document.body.style ? '-moz-' : '-ms-transform' in document.body.style ? '-ms-' : '',
-			newsize = options.element.clientWidth,
-			oldsize = d3.select(options.element).select('svg').attr('data-width');
-			d3.select(options.element).select('svg').selectAll('g').style(prefix + 'transform', 'scale(' + (newsize / oldsize) + ')');
-		}
-	}
-
-	d3.select(mapHolder).select('svg').attr('data-width', mapHolder.clientWidth);
-
-	// window.addEventListener("resize", function (event) {
-	// 	map.resize();
-	// });
-
 	var socket = io.connect();
 
 	socket.on('init', function(data){