Rename tiles to background, make more d3ish

index.html

@@ -25,7 +25,7 @@
         <script type='text/javascript' src='js/id/oauth.js'></script>
         <script type='text/javascript' src='js/id/taginfo.js'></script>
         <script type='text/javascript' src='js/id/renderer/style.js'></script>
-        <script type='text/javascript' src='js/id/renderer/tiles.js'></script>
+        <script type='text/javascript' src='js/id/renderer/background.js'></script>
         <script type='text/javascript' src='js/id/renderer/map.js'></script>
         <script type='text/javascript' src='js/id/renderer/hash.js'></script>
         <script type='text/javascript' src='js/id/renderer/markers.js'></script>

js/id/renderer/background.js

@@ -1,7 +1,7 @@
-iD.Tiles = function(selection, projection) {
-    var t = {},
-        template = 'http://ecn.t{t}.tiles.virtualearth.net/tiles/a{u}.jpeg?g=587&mkt=en-gb&n=z',
-        tile = d3.geo.tile();
+iD.Background = function() {
+    var template = 'http://ecn.t{t}.tiles.virtualearth.net/tiles/a{u}.jpeg?g=587&mkt=en-gb&n=z',
+        tile = d3.geo.tile(),
+        projection;
 
     // derive the url of a 'quadkey' style tile from a coordinate object
     function tileUrl(coord) {
@@ -25,12 +25,12 @@ iD.Tiles = function(selection, projection) {
 
     // derive the tiles onscreen, remove those offscreen and position tiles
     // correctly for the currentstate of `projection`
-    function redraw() {
+    function background() {
         var tiles = tile
             .scale(projection.scale())
             .translate(projection.translate())();
 
-        var image = selection
+        var image = this
             .attr("transform", function() {
                 return "scale(" + tiles.scale + ")translate(" + tiles.translate + ")";
             })
@@ -48,20 +48,23 @@ iD.Tiles = function(selection, projection) {
             .attr("y", function(d) { return d[1]; });
     }
 
-    t.size = function(size) {
-        tile.size(size);
-        redraw();
-        return t;
+    background.projection = function(p) {
+        if (!arguments.length) return projection;
+        projection = p;
+        return background;
     };
 
-    t.template = function(x) {
+    background.size = function(size) {
+        if (!arguments.length) return tile.size();
+        tile.size(size);
+        return background;
+    };
+
+    background.template = function(x) {
         if (!arguments.length) return template;
         template = x;
-        redraw();
-        return t;
+        return background;
     };
 
-    t.redraw = redraw;
-
-    return t;
+    return background;
 };

js/id/renderer/map.js

@@ -44,6 +44,8 @@ iD.Map = function(elem, connection) {
         defs = surface.append('defs'),
         tilegroup = surface.append('g')
             .on('click', deselectClick),
+        background = iD.Background()
+            .projection(projection),
         r = surface.append('g')
             .on('click', selectClick)
             .on('mouseover', nameHoverIn)
@@ -71,8 +73,6 @@ iD.Map = function(elem, connection) {
         .attr('id', 'clip-rect')
         .attr({ x: 0, y: 0 });
 
-     var tileclient = iD.Tiles(tilegroup, projection);
-
     function prefixMatch(p) { // via mbostock
         var i = -1, n = p.length, s = document.body.style;
         while (++i < n) if (p[i] + 'Transform' in s) return '-' + p[i].toLowerCase() + '-';
@@ -256,7 +256,10 @@ iD.Map = function(elem, connection) {
             .selectAll('#clip-rect')
             .size(dimensions);
 
-        tileclient.size(dimensions);
+        background.size(dimensions);
+
+        redraw();
+
         return map;
     }
 
@@ -414,7 +417,7 @@ iD.Map = function(elem, connection) {
     function redraw(only) {
         if (!only) {
             dispatch.move(map);
-            tileclient.redraw();
+            tilegroup.call(background);
         }
         if (getZoom() > 16) {
             download();
@@ -514,7 +517,7 @@ iD.Map = function(elem, connection) {
 
     map.selectEntity = selectEntity;
 
-    map.tileclient = tileclient;
+    map.background = background;
     map.center = center;
     map.centre = center;
     map.getZoom = getZoom;

test/index.html

@@ -23,7 +23,7 @@
   <script type='text/javascript' src='../js/iD/OAuth.js'></script>
   <script type='text/javascript' src='../js/iD/renderer/style.js'></script>
 
-  <script type='text/javascript' src='../js/iD/renderer/tiles.js'></script>
+  <script type='text/javascript' src='../js/iD/renderer/background.js'></script>
   <script type='text/javascript' src='../js/iD/renderer/Map.js'></script>
   <script type='text/javascript' src='../js/iD/renderer/hash.js'></script>
   <script type='text/javascript' src='../js/iD/renderer/markers.js'></script>