campus: Scale the map a bit

1 files changed, 18 insertions, 4 deletions

diff --git a/js/campus.js b/js/campus.js
index 941d5bb..d7a02e9 100644
--- a/js/campus.js
+++ b/js/campus.js
@@ -2,16 +2,30 @@ define(['campus-coords', 'd3'], function(coords, d3) {
     'use strict';
 
     var imageUrl = 'images/campus.jpg';
+    var width = 1280, height = 893;
+    var scalingFactor = 0.75;
 
     function initSvg(svg) {
         svg
-            .attr('width', 1280)
-            .attr('height', 893);
+            .attr('width', width * scalingFactor)
+            .attr('height', height * scalingFactor);
+        // set the container size to the same size as svg element
+        d3.select(svg.node().parentNode)
+            .style('width', svg.attr('width') + 'px')
+            .style('height', svg.attr('height') + 'px');
+        // show the full image (one could apply clipping here)
+        svg
+            .attr('viewBox', [
+                0,
+                0,
+                width / scalingFactor,
+                height / scalingFactor,
+            ].join(' '));
 
         svg.append('image')
             .attr('xlink:href', imageUrl)
-            .attr('width', 1280)
-            .attr('height', 893);
+            .attr('width', width)
+            .attr('height', height);
 
         svg.append('g')
             .selectAll('polygon')