added zoom & pan to map

public/css/style.css

@@ -291,11 +291,15 @@ table td.peerPropagationChart {
 	font-size: 12px;
 }
 
+.map-holder {
+	padding: 0;
+}
+
 #mapHolder {
 	position: relative;
 	display: block;
 	width: 100%;
-	height: 284px;
+	height: 282px;
 	overflow: hidden;
 }
 
@@ -389,6 +393,8 @@ svg .line {
 	fill: none;
 	stroke: #ff0000;
 	stroke-width: 1.3px;
+	stroke-linejoin: round;
+	stroke-linecap: round;
 	shape-rendering: geometric-precision;
 	-webkit-svg-shadow: 0 0 7px #fff;
 }

public/js/controllers.js

@@ -236,6 +236,7 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
 
 				$scope.lastBlock = $scope.bestStats.block.received;
 				$scope.lastBlocksTime = $scope.bestStats.blockTimes;
+				$scope.lastDifficulty = $scope.bestStats.block.difficulty;
 				$scope.difficultyChart = $scope.bestStats.difficulty;
 				$scope.transactionDensity = $scope.bestStats.txDensity;
 				$scope.gasSpending = $scope.bestStats.gasSpending;
@@ -262,8 +263,6 @@ function StatsCtrl($scope, $filter, socket, _, toastr) {
 				jQuery('.spark-gasspending').sparkline($scope.gasSpending.reverse(), {type: 'bar'});
 			}
 
-			$scope.lastDifficulty = $scope.bestStats.block.difficulty;
-
 			$scope.avgBlockTime = _.max($scope.nodes, function(node) {
 				return parseInt(node.stats.block.number);
 			}).stats.blocktimeAvg;

public/js/directives.js

@@ -21,19 +21,27 @@ angular.module('netStatsApp.directives', []).
 					highlightOnHover: false,
 					popupOnHover: true,
 					popupTemplate: function(geo, data) {
-						return ['<div class="tooltip-arrow"></div><div class="hoverinfo ' + data.fillClass + '"><div class="propagationBox"></div><strong>',
-								data.nodeName,
-								'</strong></div>'].join('');
+						return ['<div class="tooltip-arrow"></div>',
+								'<div class="hoverinfo ' + data.fillClass + '">',
+									'<div class="propagationBox"></div>',
+									'<strong>',
+									data.nodeName,
+									'</strong>',
+								'</div>'].join('');
 					}
 				};
 
 				scope.init = function() {
 					element.empty();
 
+					var width = 628,
+						height = 244;
+
 					scope.map = new Datamap({
 						element: element[0],
 						scope: 'world',
-						responsive: true,
+						width: 600,
+						height: 300,
 						fills: {
 							success: '#7BCC3A',
 							info: '#10A0DE',
@@ -52,6 +60,46 @@ angular.module('netStatsApp.directives', []).
 							borderWidth: 0,
 							highlightOnHover: false,
 							popupOnHover: true
+						},
+						done: function(datamap) {
+							var ev;
+
+							var zoomListener = d3.behavior.zoom()
+								.size([width, height])
+								.scaleExtent([1, 2])
+								.on("zoom", redraw)
+								.on("zoomend", animadraw);
+
+							function redraw() {
+								datamap.svg.select(".datamaps-subunits").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+								datamap.svg.select(".bubbles").selectAll("circle")
+									.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")
+									.attr("r", 3/d3.event.scale);
+
+								ev = d3.event;
+							}
+
+							zoomListener(datamap.svg);
+
+							function animadraw() {
+								var x = Math.min(0, Math.max(ev.translate[0], (-1) * width * (ev.scale-1)));
+								var y = Math.min(0, Math.max(ev.translate[1], (-1) * height * (ev.scale-1)));
+
+								datamap.svg.select(".datamaps-subunits")
+									.transition()
+									.delay(150)
+									.duration(750)
+									.attr("transform", "translate(" + x  + "," + y + ")scale(" + ev.scale + ")");
+
+								datamap.svg.select(".bubbles").selectAll("circle")
+									.transition()
+									.delay(150)
+									.duration(750)
+									.attr("transform", "translate(" + x  + "," + y + ")scale(" + ev.scale + ")")
+									.attr("r", 3/ev.scale);
+
+								zoomListener.translate([x,y]);
+							}
 						}
 					});
 

views/index.jade

@@ -135,7 +135,7 @@ block content
 
 
 
-      div.col-xs-4
+      div.col-xs-4.stat-holder.map-holder
         //- div.col-xs-12
         nodemap#mapHolder(data="map")