public/map.html in snapa-0.0.2 vs public/map.html in snapa-0.0.3

@@ -7,11 +7,11 @@
   margin: 0;
 }
 .subunit {
   fill: #D7D7D7;
   stroke: #F2F2F2;
-  stroke-width: 2;
+  stroke-width: 1.5;
 }
 .subunit.highlight {
   fill: #658436;
 }
 
@@ -30,46 +30,53 @@
 }
 
 var countries = (getParameterByName('c') || 'TZ').toUpperCase().split(','),
     width = getParameterByName('w') || 380,
     height = getParameterByName('h') || 230,
-    rotation = getParameterByName('r') || 0,
-    percent = getParameterByName('p') || .95,
-    maxScale = getParameterByName('m') || 300;
+    rotation = getParameterByName('r').split(','),
+    scale = getParameterByName('s'),
+    percent = getParameterByName('p') || .80,
+    highlight;
 
 var svg = d3.select("body").append("svg")
     .attr("width", width)
     .attr("height", height);
 
 var projection = d3.geo.mercator()
     .scale(1)
-    .rotate(rotation)
-    .translate([0, 0]);
+    .translate([width / 2, height / 2]);
 
 var path = d3.geo.path()
     .projection(projection);
 
 d3.json("countries.json", function(error, world) {
-  var bounds = [[Number.MAX_VALUE, Number.MAX_VALUE], [Number.MIN_VALUE, Number.MIN_VALUE]],
-      features = topojson.feature(world, world.objects.countries).features;
+  var features = topojson.feature(world, world.objects.countries).features;
 
   for (var i = 0; i < features.length; i++) {
     if (countries.indexOf(features[i].id) !== -1) {
-      var b = path.bounds(features[i]);
-      bounds = [
-        [Math.min(bounds[0][0], b[0][0]), Math.min(bounds[0][1], b[0][1])],
-        [Math.max(bounds[1][0], b[1][0]), Math.max(bounds[1][1], b[1][1])]
-      ];
+      if (highlight === undefined) {
+        highlight = JSON.parse(JSON.stringify(features[i]));
+      } else {
+        highlight.geometry.coordinates = d3.merge([highlight.geometry.coordinates, features[i].geometry.coordinates])
+      }
     }
   }
 
-  var scale = percent / Math.max((bounds[1][0] - bounds[0][0]) / width, (bounds[1][1] - bounds[0][1]) / height),
-      scale = Math.min(scale, maxScale),
-      translate = [(width - scale * (bounds[1][0] + bounds[0][0])) / 2, (height - scale * (bounds[1][1] + bounds[0][1])) / 2];
+  if (rotation[0] === '') {
+    var centroid = d3.geo.centroid(highlight);
+    rotation = [-centroid[0], -centroid[1]]
+  }
 
   projection
-      .scale(scale)
-      .translate(translate);
+      .rotate(rotation);
+
+  if (scale === '') {
+    var bounds = path.bounds(highlight);
+    scale = percent / Math.max((bounds[1][0] - bounds[0][0]) / width, (bounds[1][1] - bounds[0][1]) / height);
+  }
+
+  projection
+      .scale(scale);
 
   svg.selectAll("path")
       .data(features)
       .enter().append("path")
         .attr("class", function(d) { return "subunit " + d.id + (countries.indexOf(d.id) !== -1 ? ' highlight' : ''); })