modules/tinyweb: zoomable

modules/tinyweb/tinyweb/tinyweb.js

@@ -48,13 +48,23 @@ window.onload = function() {
 		element: document.getElementById('map'),
 		fills: fills,
 		data: {},
+		height: 400,
 		geographyConfig: {
+			highlightOnHover: false,
+			borderColor: '#ccc',
 			popupTemplate: function(geo, data) {
 				return ['<div class="hoverinfo">',
 					'<strong>', geo.properties.name, '</strong>',
 					'<br>Queries: <strong>', data ? data.queries : '0', '</strong>',
 					'</div>'].join('');
 			}
+		},
+		done: function(datamap) {
+		   datamap.svg.call(d3.behavior.zoom().on("zoom", redraw));
+		   function redraw() {
+		        datamap.svg.selectAll("g")
+		        	.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
+		   }
 		}
 	});
 	/* Draw map legend */

modules/tinyweb/tinyweb/tinyweb.tpl

@@ -6,8 +6,8 @@
 	h1, h2, h3 { font-weight: 300; }
 	th { text-align: left; font-weight: normal; margin-bottom: 0.5em; }
 	#page { font-weight: 300; }
-	#page { width: 800px; margin: 0 auto; }
-	#stats, #map { width: 800px; height: 300px; }
+	#page { width: 900px; margin: 0 auto; }
+	#stats { height: 300px; }
 	#stats .layer-cached .area, .l-cached  { fill: #2CA02C; color: #2CA02C; }
 	#stats .layer-10ms .area  , .l-10ms    { fill: #165683; color: #165683; }
 	#stats .layer-100ms .area , .l-100ms   { fill: #258FDA; color: #258FDA; }