Add tile debugging, redraw when debug flags change

css/app.css

@@ -2258,6 +2258,64 @@ div.full-screen > button:hover {
     border-radius: 4px;
 }
 
+
+/* Tiles
+------------------------------------------------------- */
+
+img.tile {
+    position:absolute;
+    transform-origin:0 0;
+    -ms-transform-origin:0 0;
+    -webkit-transform-origin:0 0;
+    -moz-transform-origin:0 0;
+    -o-transform-origin:0 0;
+
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    opacity: 0;
+
+    -webkit-transition: opacity 200ms linear;
+    transition: opacity 200ms linear;
+    -moz-transition: opacity 200ms linear;
+}
+
+.tile-label-debug {
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    position: absolute;
+    text-align: center;
+    width: 128px;
+    border-radius: 3px;
+    z-index: 2;
+
+    transform-origin:0 0;
+    -ms-transform-origin:0 0;
+    -webkit-transform-origin:0 0;
+    -moz-transform-origin:0 0;
+    -o-transform-origin:0 0;
+
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+img.tile-debug {
+    border: 1px solid red;
+}
+
+img.tile-loaded {
+    opacity: 1;
+}
+
+img.tile-removing {
+    opacity: 0;
+}
+
+
 /* Map
 ------------------------------------------------------- */
 
@@ -2274,6 +2332,7 @@ div.full-screen > button:hover {
     -webkit-transform-origin:0 0;
     -moz-transform-origin:0 0;
     -o-transform-origin:0 0;
+
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
@@ -2309,6 +2368,7 @@ div.full-screen > button:hover {
     -webkit-transform-origin:0 0;
     -moz-transform-origin:0 0;
     -o-transform-origin:0 0;
+
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;

css/map.css

@@ -1,25 +1,3 @@
-/* tiles */
-img.tile {
-    position:absolute;
-    transform-origin:0 0;
-    -ms-transform-origin:0 0;
-    -webkit-transform-origin:0 0;
-    -moz-transform-origin:0 0;
-    -o-transform-origin:0 0;
-
-    opacity: 0;
-
-    -webkit-transition: opacity 200ms linear;
-    transition: opacity 200ms linear;
-    -moz-transition: opacity 200ms linear;
-}
-
-img.tile-loaded {
-    opacity: 1;
-}
-img.tile-removing {
-    opacity: 0;
-}
 
 use { pointer-events: none; }
 

js/id/id.js

@@ -2,7 +2,7 @@ window.iD = function () {
     window.locale.en = iD.data.en;
     window.locale.current('en');
 
-    var dispatch = d3.dispatch('enter', 'exit'),
+    var dispatch = d3.dispatch('enter', 'exit', 'change'),
         context = {};
 
     // https://github.com/openstreetmap/iD/issues/772
@@ -220,11 +220,13 @@ window.iD = function () {
     context.debugTile = function(_) {
         if (!arguments.length) return debugTile;
         debugTile = _;
+        dispatch.change();
         return context;
     };
     context.debugCollision = function(_) {
         if (!arguments.length) return debugCollision;
         debugCollision = _;
+        dispatch.change();
         return context;
     };
 

js/id/renderer/background.js

@@ -1,6 +1,6 @@
 iD.Background = function(context) {
     var dispatch = d3.dispatch('change'),
-        baseLayer = iD.TileLayer().projection(context.projection),
+        baseLayer = iD.TileLayer(context).projection(context.projection),
         overlayLayers = [],
         backgroundSources;
 
@@ -138,7 +138,7 @@ iD.Background = function(context) {
             }
         }
 
-        layer = iD.TileLayer()
+        layer = iD.TileLayer(context)
             .source(d)
             .projection(context.projection)
             .dimensions(baseLayer.dimensions());

js/id/renderer/map.js

@@ -26,6 +26,8 @@ iD.Map = function(context) {
         mousemove;
 
     function map(selection) {
+        context
+            .on('change.map', redraw);
         context.history()
             .on('change.map', redraw);
         context.background()

js/id/renderer/tile_layer.js

@@ -1,4 +1,4 @@
-iD.TileLayer = function() {
+iD.TileLayer = function(context) {
     var tileSize = 256,
         tile = d3.geo.tile(),
         projection,
@@ -78,6 +78,7 @@ iD.TileLayer = function() {
     // rentered when tiles load/error (see #644).
     function render(selection) {
         var requests = [];
+        var showDebug = context.debugTile() && !source.overlay;
 
         if (source.validZoom(z)) {
             tile().forEach(function(d) {
@@ -131,6 +132,14 @@ iD.TileLayer = function() {
                 'scale(' + scale + ',' + scale + ')';
         }
 
+        function debugTransform(d) {
+            var _ts = tileSize * Math.pow(2, z - d[2]);
+            var scale = tileSizeAtZoom(d, z);
+            return 'translate(' +
+                ((d[0] * _ts) - tileOrigin[0] + pixelOffset[0] + scale * (tileSize / 4)) + 'px,' +
+                ((d[1] * _ts) - tileOrigin[1] + pixelOffset[1] + scale * (tileSize / 2)) + 'px)';
+        }
+
         var image = selection
             .selectAll('img')
             .data(requests, function(d) { return d[3]; });
@@ -155,7 +164,23 @@ iD.TileLayer = function() {
 
         image
             .style(transformProp, imageTransform)
+            .classed('tile-debug', showDebug)
             .classed('tile-removing', false);
+
+
+        var debug = selection.selectAll('.tile-label-debug')
+            .data(showDebug ? requests : [], function(d) { return d[3]; });
+
+        debug.exit()
+            .remove();
+
+        debug.enter()
+            .append('div')
+            .attr('class', 'tile-label-debug');
+
+        debug
+            .text(function(d) { return d[2] + ' / ' + d[0] + ' / ' + d[1]; })
+            .style(transformProp, debugTransform);
     }
 
     background.projection = function(_) {

js/id/ui/map_in_map.js

@@ -2,7 +2,7 @@ iD.ui.MapInMap = function(context) {
     var key = '/';
 
     function map_in_map(selection) {
-        var backgroundLayer = iD.TileLayer(),
+        var backgroundLayer = iD.TileLayer(context),
             overlayLayers = {},
             projection = iD.geo.RawMercator(),
             gpxLayer = iD.svg.Gpx(projection, context).showLabels(false),
@@ -159,7 +159,7 @@ iD.ui.MapInMap = function(context) {
             var activeOverlayLayers = [];
             for (var i = 0; i < overlaySources.length; i++) {
                 if (overlaySources[i].validZoom(zMini)) {
-                    if (!overlayLayers[i]) overlayLayers[i] = iD.TileLayer();
+                    if (!overlayLayers[i]) overlayLayers[i] = iD.TileLayer(context);
                     activeOverlayLayers.push(overlayLayers[i]
                         .source(overlaySources[i])
                         .projection(projection)

test/spec/renderer/tile_layer.js

@@ -1,9 +1,10 @@
 describe('iD.TileLayer', function() {
-    var c, d;
+    var context, d, c;
 
     beforeEach(function() {
+        context = iD();
         d = d3.select(document.createElement('div'));
-        c = iD.TileLayer().projection(d3.geo.mercator());
+        c = iD.TileLayer(context).projection(d3.geo.mercator());
     });
 
     afterEach(function() {