From f6529cac39157f8d80c4bbd7ae248d71e67eba45 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Tue, 1 Dec 2015 11:39:26 -0500
Subject: [PATCH] Eliminate rounding causing jumpiness and loss of precision
 (closes #2849)

---
 js/id/renderer/map.js        | 12 +++++-------
 js/id/renderer/tile_layer.js | 10 +++++-----
 js/id/svg.js                 | 15 +--------------
 js/id/ui/map_in_map.js       |  4 ++--
 4 files changed, 13 insertions(+), 28 deletions(-)

diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index a242dbf27..349f6257d 100644
--- a/js/id/renderer/map.js
+++ b/js/id/renderer/map.js
@@ -2,7 +2,6 @@ iD.Map = function(context) {
     var dimensions = [1, 1],
         dispatch = d3.dispatch('move', 'drawn'),
         projection = context.projection,
-        roundedProjection = iD.svg.RoundProjection(projection),
         zoom = d3.behavior.zoom()
             .translate(projection.translate())
             .scale(projection.scale() * 2 * Math.PI)
@@ -12,11 +11,11 @@ iD.Map = function(context) {
         transformStart,
         transformed = false,
         minzoom = 0,
-        points = iD.svg.Points(roundedProjection, context),
-        vertices = iD.svg.Vertices(roundedProjection, context),
+        points = iD.svg.Points(projection, context),
+        vertices = iD.svg.Vertices(projection, context),
         lines = iD.svg.Lines(projection),
         areas = iD.svg.Areas(projection),
-        midpoints = iD.svg.Midpoints(roundedProjection, context),
+        midpoints = iD.svg.Midpoints(projection, context),
         labels = iD.svg.Labels(projection, context),
         supersurface, surface,
         mouse,
@@ -169,8 +168,8 @@ iD.Map = function(context) {
             .scale(d3.event.scale / (2 * Math.PI));
 
         var scale = d3.event.scale / transformStart[0],
-            tX = Math.round((d3.event.translate[0] / scale - transformStart[1][0]) * scale),
-            tY = Math.round((d3.event.translate[1] / scale - transformStart[1][1]) * scale);
+            tX = (d3.event.translate[0] / scale - transformStart[1][0]) * scale,
+            tY = (d3.event.translate[1] / scale - transformStart[1][1]) * scale;
 
         transformed = true;
         iD.util.setTransform(supersurface, tX, tY, scale);
@@ -187,7 +186,6 @@ iD.Map = function(context) {
     }
 
     function redraw(difference, extent) {
-
         if (!surface) return;
 
         clearTimeout(timeoutId);
diff --git a/js/id/renderer/tile_layer.js b/js/id/renderer/tile_layer.js
index 0db58f8ab..1c056070d 100644
--- a/js/id/renderer/tile_layer.js
+++ b/js/id/renderer/tile_layer.js
@@ -9,7 +9,7 @@ iD.TileLayer = function() {
         source = d3.functor('');
 
     function tileSizeAtZoom(d, z) {
-        return Math.ceil(tileSize * Math.pow(2, z - d[2])) / tileSize;
+        return (tileSize * Math.pow(2, z - d[2])) / tileSize;
     }
 
     function atZoom(t, distance) {
@@ -83,8 +83,8 @@ iD.TileLayer = function() {
         }
 
         var pixelOffset = [
-            Math.round(source.offset()[0] * Math.pow(2, z)),
-            Math.round(source.offset()[1] * Math.pow(2, z))
+            source.offset()[0] * Math.pow(2, z),
+            source.offset()[1] * Math.pow(2, z)
         ];
 
         function load(d) {
@@ -109,8 +109,8 @@ iD.TileLayer = function() {
             var _ts = tileSize * Math.pow(2, z - d[2]);
             var scale = tileSizeAtZoom(d, z);
             return 'translate(' +
-                (Math.round((d[0] * _ts) - tileOrigin[0]) + pixelOffset[0]) + 'px,' +
-                (Math.round((d[1] * _ts) - tileOrigin[1]) + pixelOffset[1]) + 'px)' +
+                ((d[0] * _ts) - tileOrigin[0] + pixelOffset[0]) + 'px,' +
+                ((d[1] * _ts) - tileOrigin[1] + pixelOffset[1]) + 'px)' +
                 'scale(' + scale + ',' + scale + ')';
         }
 
diff --git a/js/id/svg.js b/js/id/svg.js
index 993692581..1e704bf7a 100644
--- a/js/id/svg.js
+++ b/js/id/svg.js
@@ -1,10 +1,4 @@
 iD.svg = {
-    RoundProjection: function(projection) {
-        return function(d) {
-            return iD.geo.roundCoords(projection(d));
-        };
-    },
-
     PointTransform: function(projection) {
         return function(entity) {
             // http://jsperf.com/short-array-join
@@ -13,19 +7,12 @@ iD.svg = {
         };
     },
 
-    Round: function () {
-        return d3.geo.transform({
-            point: function(x, y) { return this.stream.point(Math.floor(x), Math.floor(y)); }
-        });
-    },
-
     Path: function(projection, graph, polygon) {
         var cache = {},
-            round = iD.svg.Round().stream,
             clip = d3.geo.clipExtent().extent(projection.clipExtent()).stream,
             project = projection.stream,
             path = d3.geo.path()
-                .projection({stream: function(output) { return polygon ? project(round(output)) : project(clip(round(output))); }});
+                .projection({stream: function(output) { return polygon ? project(output) : project(clip(output)); }});
 
         return function(entity) {
             if (entity.id in cache) {
diff --git a/js/id/ui/map_in_map.js b/js/id/ui/map_in_map.js
index 0ca749328..d57026aa3 100644
--- a/js/id/ui/map_in_map.js
+++ b/js/id/ui/map_in_map.js
@@ -50,8 +50,8 @@ iD.ui.MapInMap = function(context) {
             zDiff = zMain - zMini;
 
             var scale = kCurr / kLast,
-                tX = Math.round((tCurr[0] / scale - tLast[0]) * scale),
-                tY = Math.round((tCurr[1] / scale - tLast[1]) * scale);
+                tX = (tCurr[0] / scale - tLast[0]) * scale,
+                tY = (tCurr[1] / scale - tLast[1]) * scale;
 
             iD.util.setTransform(tiles, tX, tY, scale);
             iD.util.setTransform(svg, 0, 0, scale);